jquery daterangepicker not working in modal
Asked Answered
H

6

8

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

Hum answered 17/7, 2013 at 8:8 Comment(1)
does it work, when the modal is visible when the daterangepicker is initialized? could you show the whole js?Unific
R
5

I had a similar problem with datepicker jquery.

When I clicked on the input, nothing happened, no error, nothing.

The problem was that the datepicker was working, but the calendar appeared under the modal, I hacked this with css :

.datepicker{
    z-index: 1100 !important;
}

Maybe your problem is similar to the mine ,


Update after 8 years of service....

Look at the better answer at bottom of this answer

Ritchie answered 8/10, 2013 at 9:10 Comment(3)
I have same error. I tried this CSS hack but nothing happened.Ormond
@YasinYörük Do you have a online website where I can see that ?Ritchie
Sorry you can't see that. Beacuse I worked on intranet project. But I solve the problem. I use ASP.NET so I have masterpage. Jquery and daterangepicker init on masterpage. I putted on modalbox page this files and it was worked.Ormond
L
26

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'

Lsd answered 18/1, 2017 at 20:22 Comment(3)
Worked like a charm. Thanks for the answer. The best solution I would say.Mordy
better solution than the accepted answer, thank you!Maturate
Yes, If daterangerpicker dropdown is placed under "body" then after loading modal, it prevents the input clicks of daterangepicker dropdown. So, rather moving the dropdown inside modal-body is the most acceptable idea. Note: parentEl also accepts jQuery selectorFourinhand
R
5

I had a similar problem with datepicker jquery.

When I clicked on the input, nothing happened, no error, nothing.

The problem was that the datepicker was working, but the calendar appeared under the modal, I hacked this with css :

.datepicker{
    z-index: 1100 !important;
}

Maybe your problem is similar to the mine ,


Update after 8 years of service....

Look at the better answer at bottom of this answer

Ritchie answered 8/10, 2013 at 9:10 Comment(3)
I have same error. I tried this CSS hack but nothing happened.Ormond
@YasinYörük Do you have a online website where I can see that ?Ritchie
Sorry you can't see that. Beacuse I worked on intranet project. But I solve the problem. I use ASP.NET so I have masterpage. Jquery and daterangepicker init on masterpage. I putted on modalbox page this files and it was worked.Ormond
S
2

You can change z-index in event show.daterangepicker

$('.daterange-single').on('show.daterangepicker', function(e){
    var modalZindex = $(e.target).closest('.modal').css('z-index');
    $('.daterangepicker').css('z-index', modalZindex+1);
});
Squab answered 3/7, 2016 at 17:28 Comment(0)
G
0

I resolve my issues with the couple of :

    .datepicker{
        z-index: 1100 !important;
    }     
    #ui-datepicker-div {
        width: 30% !important;
    }
Gardol answered 23/1, 2020 at 10:13 Comment(0)
H
0

Simply remove tabindex="-1" from your Bootstrap modal.

<div class="modal" tabindex="-1">
Husted answered 27/4, 2020 at 2:47 Comment(0)
N
0

On version 0.21.1, insert the below CSS code to effect.

.date-picker-wrapper{
      z-index: 1100 !important;
 }
Nickolasnickolaus answered 8/6, 2022 at 5:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.