javascript - jquery daterangepicker不在模态中工作

Question

我有一个模态弹出窗口（来自引导程序），它打开并包含一个带有 daterangepicker 的文本输入，但 daterangepicker 不起作用（当我单击文本框时我什么也看不到）并且我在控制台中看不到任何错误。

这是输入：

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

这是创建 daterangepicker 的 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>

抱歉，代码太长了

score 20 · Accepted Answer

除了修改元素的 z-index 之外，您还可以设置parentEl选项（创建日历控件的位置）。这将允许实际的 daterangepicker 对象继承模态容器的 z-index。

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

从文档中：

parentEl：（字符串）将添加日期范围选择器的父元素的 jQuery 选择器，如果未提供，则为“body”

score 4 · Accepted Answer

我对 datepicker jquery 有类似的问题。

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

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

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

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

服务 8 年后更新......

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

score 2 · Accepted Answer

您可以在事件 show.daterangepicker 中更改 z-index

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

score 0 · Accepted Answer

我解决了以下几个问题：

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

score 0 · Accepted Answer

0

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

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

于 2020-04-27T02:47:55.383 回答

javascript - jquery daterangepicker不在模态中工作

更新

5 回答 5

Related

Reference