jquery daterangepicker not working in modal

javascript jquery css twitter-bootstrap daterangepicker
Dan Tincu picture Dan Tincu · Jul 17, 2013 · Viewed 12.4k times · Source

I have a modal popup (from bootstrap) that opens and contains a text input with daterangepicker, but the daterangepicker does not work (i see nothing when i click on the textbox) and i see no errors in the console.

Here is the input: 

<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>@DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
                id="lastModifiedDateFilter" />
</div>
<div class="modal-footer">
    <a href="#" class="btn" onclick="$('#divChooseDossier').modal('hide')">@DossierReceipts.Cancel</a>
</div>

Here is the javascript to create the daterangepicker:

$("#lastModifiedDateFilter").daterangepicker({
        dateFormat: "yy.mm.dd"
        , rangeSplitter: '-'
    });

And here is the javascript to open the popup:

$("#divCreateReceipt").modal("show");

Does anyone know why does this not work? Thanks

UPDATE

Here is the complete code for the popup window:

@{
ViewBag.Title = "Dosare";
}
@using ExpertExecutor.Resources.Dossier



@section leftMenu{
@Html.Partial("_LeftMenu")
}



@Scripts.Render("~/bundles/daterangepicker")
@Scripts.Render("~/bundles/watermark")
@Styles.Render("~/Content/daterangepicker")

<script src="@Url.Content("~/Scripts/jquery.watermark.min.js")" type="text/javascript">     </script>
<script src="@Url.Content("/Scripts/jquery.jqGrid.fluid.js")"></script>

@Html.Hidden("redirectUrl", (string)ViewBag.RedirectUrl)

<div class="form-search form-inline alert alert-info">
<fieldset>
    <legend>@Index.FiltersCaption</legend>
    <dl>
        <dd>
            <span>@Index.DossierColumn</span>
            <input type="text" id="dossierFilter" class="search-query input-xxlarge" />
        </dd>
        <dd>
            <span>@Index.DossierStatusColumn</span>
            @Html.DropDownList("dossierStatusFilter", (List<SelectListItem>)ViewData["DossierStatuses"], new { @class = "input-medium" })
            <span>@Index.LastModifiedDateColumn</span>
            <input type="text" class="datePicker ui-rangepicker-input search-query input-small"
                id="lastModifiedDateFilter" />
            <span>@Index.LastOperatorColumn</span>
            @Html.DropDownList("lastOperatorFilter", (List<SelectListItem>)ViewData["Users"])
        </dd>
        <dd>
            <input type="button" class="btn btn-info" value="@Index.Search" onclick="applyFilter();"/>
            <input type="button" class="btn btn-info" value="@Index.ClearFilter" onclick="clearFilter();" />
        </dd>
    </dl>
</fieldset>
</div>
<div id="dossiersGridWrapper" class="row-fluid">
<table id="dossiersGrid"></table>
<div id="dossiersGridPager"></div>
</div>
@if (!ViewBag.NoActions)
{
<a href='@Url.Action("CreateDossier")' class="btn btn-warning">@Index.CreateDossier</a>
}
<script type="text/javascript">

$('#dossierFilter').watermark('@Index.WatermarkSearchDossier');

$.jgrid.defaults.loadtext = '@Index.GridLoading';

var mvcJqGrid = {
    customDblClick: "@ViewBag.customDblClick",
    actions: {
        buttonize: function (cellvalue, options, rowobject) {
            return '<a onclick="return mvcJqGrid.actions.edit(\'' + options.rowId + '\')" href="#" title="Editare dosar"><i class="ui-icon ui-icon-pencil" style="display:inline-block"></i></a>' +
                '<a onclick="return mvcJqGrid.actions.costs(\'' + options.rowId + '\')" href="#" title="Cheltuieli dosar"><i class="ui-icon ui-icon-cart" style="display:inline-block"></i></a>' +
                '<a onclick="return mvcJqGrid.actions.imobil(\'' + options.rowId + '\')" href="#" title="Bunuri imobile"><i class="ui-icon ui-icon-home" style="display:inline-block"></i></a>' +
                '<a onclick="return mvcJqGrid.actions.mobil(\'' + options.rowId + '\')" href="#" title="Bunuri mobile"><i class="ui-icon ui-icon-suitcase" style="display:inline-block"></i></a>' +
                 '<a onclick="return mvcJqGrid.actions.open(\'' + options.rowId + '\')" href="#" title="Open Dossier"><i class="ui-icon ui-icon-folder-open" style="display:inline-block"></i></a>';

        },
        edit: function (id) {
            window.open('@Url.Action("EditDossier", "Dossier")?id=' + id, "_self");
            return false;
        },
        costs: function (id) {
            window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('@Url.Action("DossierCosts", "Dossier")?id=' + id), "_self");
            return false;
        },
        imobil: function (id) {
            window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id+'&strUrl='+encodeURI('@Url.Action("ImovableList", "Asset")?idDossier=' + id), "_self");
            return false;
        },
        mobil: function (id) {
            window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('@Url.Action("MovableList", "Asset")?idDossier=' + id), "_self");
            return false;
        },
        open: function (id) {

            if (mvcJqGrid.customDblClick.length > 0 && typeof (window[mvcJqGrid.customDblClick]) == "function") {
                return window[mvcJqGrid.customDblClick](id);
            }

            $.getJSON('@Url.Action("OpenDossier", "Dossier")' + "?id=" + id, function (data) {
                if (data && data.success) {

                    var redirectUrl = $("#redirectUrl").val();
                    if (redirectUrl) {
                        window.open(redirectUrl, "_self");
                    } else {
                        window.location.reload();
                    }
                } else {
                    alert("@Index.ErrorOpenDossier");
                }
            });

            return false;
        }
    }
};


    $("#dossiersGrid").jqGrid({
        url: '@Url.Action("DossiersGridData", "Dossier")',
        datatype: 'json',
        mtype: 'POST',
        colModel: [
            { name: "@Index.CompletedColumn", sortable: false, editable: false, index: "Completed" },
        { name: "@Index.DossierColumn", sortable: true, editable: false, index: "Dossier" },
        { name: "@Index.DossierStatusColumn", sortable: true, editable: false, index: "DossierStatus" },
        { name: "@Index.LastModifiedDateColumn", sortable: true, editable: false, index: "LastModifiedDate" },
        { name: "@Index.LastOperatorColumn", sortable: true, editable: false, index: "LastOperator" },
        { name: "@Index.CreditorsColumn", sortable: false, editable: false, index: "Creditors" },
        { name: "@Index.DebtorsColumn", sortable: false, editable: false, index: "Debtors" },
        @if (!ViewBag.NoActions)
   {
            @:{ name: "@Index.Action", sortable: false, editable: false,  index: "Action", formatter: mvcJqGrid.actions.buttonize }
        }
    ],
        viewrecords: true,
        postData: {
            dossierFilter: function () { return $("#dossierFilter").val(); },
            dossierStatusFilter: function () { return $("#dossierStatusFilter").val(); },
            lastModifiedDateFilter: function () { return $("#lastModifiedDateFilter").val(); },
            lastOperatorFilter: function () {
                return $("#lastOperatorFilter").val();
            }
        },
        pager: "#dossiersGridPager",
        rowNum: 10,
        caption: "Lista dosare",
        autowidth: true,
        rowList: [10, 15, 20, 50],
        emptyrecords: 'No record Found',
        height: '100%',
        ondblClickRow: mvcJqGrid.actions.open

    });

    $("#lastModifiedDateFilter").daterangepicker({
        dateFormat: "yy.mm.dd"
        , rangeSplitter: '-'
    });

    function applyFilter() {
        $("#dossiersGrid").trigger("reloadGrid");
    }

    function clearFilter() {
        $('#dossierFilter').val("");
        $("#dossierStatusFilter").val("");
        $("#lastModifiedDateFilter").val("");
        $("#lastOperatorFilter").val("");
        $("#dossiersGrid").trigger("reloadGrid");
    }

    if (leftMenu) {
        leftMenu.setContext('dossier-list help-dossier');
    }


    var resizeDossiersGrid = function () {
        $("#dossiersGrid").fluidGrid({ example: "#dossiersGridWrapper", offset: 0 });
    };

    $(window).on('resize', resizeDossiersGrid);
    $("#dossiersGrid").on("jqGridGridComplete", resizeDossiersGrid);

</script>

And here is the complete code for the calling page:

@using ExpertExecutor.DataLayer.Models
@using ExpertExecutor.Resources.Cost
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section leftMenu{
    @Html.Partial("_LeftMenu")
}

@section head
{
@Scripts.Render("~/bundles/jqueryval")
<style type="text/css">
    #divChooseDossier {
        width: 900px;
    }
    #divCreateReceipt {
        width: 900px;
    }
</style>
}

<h2>@ViewBag.Title</h2>
@Html.Hidden("IdDossier", ViewData["IdDossier"])
<table id="dossierReceiptsGrid"></table>
<a href="#divCreateReceipt" role="button" class="btn" data-toggle="modal"></a>
<div id="divCreateReceipt" class="modal hide fade" role="dialog" aria-hidden="true">
</div>
<a href="#" role="button" class="btn" data-toggle="modal" onclick="showCreateReceiptOption();">@DossierReceipts.CreateReceipt</a>
<div id="divConfirmDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>@DossierReceipts.ConfirmDossier</h3>
</div>
<div class="modal-body">
    <span>@DossierReceipts.ConfirmDossierMessage<strong>@(ViewData["Dossier"] != null ? string.Format("{0}/{1}", ((Dossier)ViewData["Dossier"]).DossierNumber, ((Dossier)ViewData["Dossier"]).DossierYear) : string.Empty)</strong>?</span>
</div>
<div class="modal-footer">
    <a href="#" class="btn" onclick="$('#divConfirmDossier').modal('hide')">@DossierReceipts.Cancel</a>
    <input type="button" class="btn btn-primary" value="@DossierReceipts.ConfirmDossierOk" onclick="confirmDossier();"/>
    <input type="button" class="btn" value="@DossierReceipts.SelectDossier" onclick="showChooseDossierModal();"/>
</div>
</div>
<a href="#divChooseDossier" role="button" class="btn" data-toggle="modal"></a>
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>@DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
    <a href="#" class="btn" onclick="$('#divChooseDossier').modal('hide')">@DossierReceipts.Cancel</a>
</div>
</div>

<script type="text/javascript">
leftMenu.setContext('financial help-financial');

$("#dossierReceiptsGrid").jqGrid({
    url: '@Url.Action("ReceiptsGridData")', 
    datatype: "json",
    mtype: "POST",
    postData: {
        idDossier: '@ViewData["IdDossier"]'
    },
    colNames: ['@DossierReceipts.DossierColumn', '@DossierReceipts.ReceiptDateColumn', '@DossierReceipts.ReceiptValueColumn', '@DossierReceipts.ReceiptCurrencyColumn', '@DossierReceipts.ReceiptColumn'], 
    colModel: [
        { name: "Dossier", index: "Dossier", sortable: true, editable: false },
        { name: "ReceiptDate", index: "ReceiptDate", sortable: true, editable: false },
        { name: "ReceiptValue", index: "ReceiptValue", sortable: true, editable: false },
        { name: "Currency", index: "Currency", sortable: true, editable: false },
        { name: "Receipt", index: "Receipt", sortable: true, editable: false }
    ],
    viewrecords: true
});

function confirmDossier() {
    $("#divConfirmDossier").modal("hide");
    $("#divCreateReceipt").modal("show");
}

var reloadDossiersGrid = true;

function showChooseDossierModal() {
    $("#divConfirmDossier").modal("hide");
    $("#divChooseDossier").modal("show");
    if (reloadDossiersGrid) {
        reloadDossiersGrid = false;
        $.post('@Url.Action("Index", "Dossier")?redirectUrl=&noActions=true&partial=true&customDblClick=chooseDossier', null, function(postResponse) {
            $("#divChooseDossier .modal-body").html(postResponse);
            $("#divChooseDossier").on("shown", function() {
                resizeDossiersGrid();
                $("#lastModifiedDateFilter").daterangepicker({
                                dateFormat: "yy.mm.dd"
                    , rangeSplitter: '-'
                });
            });
        });
    } else {
        $("#divChooseDossier").modal("show");
    }
}

function chooseDossier(id) {
    $("#IdDossier").val(id);
    $("#divChooseDossier").modal("hide");
    $.get('@Url.Action("CreateReceipt", "Financial")?idDossier=' + id, null, function(getResponse) {
        $("#divCreateReceipt").html(getResponse);
        $("#divCreateReceipt").modal("show");
    });
    $.get('@Url.Action("GetDossierDisplayName")?id=' + id, null, function(getResponse) {
        $("#divConfirmDossier .modal-body strong").text(getResponse.name);
    });
    $("#IdDossier").val(id);
}

$(function() {
    $("a[href='#divCreateReceipt']").hide();
    $("a[href='#divChooseDossier']").hide();
});

function showCreateReceiptOption() {
    if ($("#IdDossier").val() && $("#IdDossier").val().length > 0) {
        $("#divConfirmDossier").modal("show");
    } else {
        showChooseDossierModal();
    }
}
</script>

Sorry for the long code

Answer

Domenic D. picture Domenic D. · Jan 18, 2017

Rather than modifying the z-index of elements, you can also set the parentEl option (where the calendar control is created). This will allow the actual daterangepicker object to inherit the z-index of the modal container.

$("#lastModifiedDateFilter").daterangepicker({
    parentEl: "#divChooseDossier .modal-body"            
})

From the documentation:

parentEl: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be 'body'

Related questions

How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More
How to create a toggle button in Bootstrap

I originally created a web app in HTML, CSS and JavaScript, then was asked to create it again in Bootstrap too. I've done it all fine, but I had toggle buttons in the web app that have changed back to …

Read More
TypeError: $(...).modal is not a function with bootstrap Modal

I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with Codeigniter 2.1. Following Dynamically inserting a bootstrap modal partial view into a view, I have: <div id="modal_target"&…

Read More