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> 

Вот Javascript для создания daterangepicker:

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

А вот Javascript, чтобы открыть всплывающее окно:

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

Кто-нибудь знает, почему это не работает? Благодаря

UPDATE

Вот полный код всплывающего окна:

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

Извините за долгое время код

Answer 1

У меня была аналогичная проблема с da tepicjer jquery.

Когда я нажал на вход, ничего не произошло, никаких ошибок, ничего.

Проблема заключалась в том, что DatePicker работал, но календарь оказался под модальным, я взломал это с помощью CSS:

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

Может быть, ваша проблема похожа на шахту,

Answer 2

Вы можете изменить г-индекс в show.daterangepicker событий

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

Answer 3

Вместо модификации Z-индекс элементов, вы можете также установить parentEl вариант (где календарь конт l создается). Это позволит фактическому объекту daterangepicker наследовать z-индекс модального контейнера.

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

От documentation:

parentEl: (строка) JQuery селектор родительского элемента, что средство выбора диапазона дат будет добавлен, если не предусмотрено это будет «тело»