jquery日期范围选择器无法在模式中工作

jquery daterangepicker not working in modal

本文关键字：模式 工作 日期 范围 选择器 jquery      更新时间：2023-09-26

我有一个模式弹出窗口（来自引导程序），它打开并包含使用日期范围选择器输入的文本，但日期范围选择器不工作（当我点击文本框时，我什么也看不到），控制台中也没有错误。

输入如下：

<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>

以下是创建日期范围选择器的javascript：

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

这里是打开弹出窗口的javascript：

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

有人知道为什么这不起作用吗？感谢

更新

以下是弹出窗口的完整代码：

@{
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>

这里是调用页面的完整代码：

@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>

很抱歉代码太长

您也可以设置parentEl选项（在其中创建日历控件），而不是修改元素的z索引。这将允许实际的日期范围选择器对象继承模式容器的z索引。

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

来自文件：

parentEl：（string）jQuery日期所在父元素的选择器范围选择器将被添加到，如果没有提供，这将是"正文"

我在使用日期选择器jquery时遇到了类似的问题。

当我点击输入时，什么都没发生，没有错误，什么都没有。

问题是日期选择器正在工作，但日历出现在模态下，我用css破解了它：

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

也许你的问题和我的类似，

服务8年后更新

看看这个答案底部更好的答案

您可以在事件显示中更改z索引

$('.daterange-single').on('show.daterangepicker', function(e){
    var modalZindex = $(e.target).closest('.modal').css('z-index');
    $('.daterangepicker').css('z-index', modalZindex+1);
});

我用以下几个解决了我的问题：

    .datepicker{
        z-index: 1100 !important;
    }     
    #ui-datepicker-div {
        width: 30% !important;
    }

只需从引导模式中删除tabindex="-1"。

<div class="modal" tabindex="-1">

在版本0.21.1上，插入以下CSS代码即可生效。

.date-picker-wrapper{
      z-index: 1100 !important;
 }
相关文章：