Question

我在使用datepicker时遇到了这个烦人的问题。我正在使用MVC5，Bootstrap 3.2，jquery 1.10.2和jquery-ui-1.11.1。我在局部视图中有2个日期选择器，它是从bs模态调用的，当我第二次显示模态时，datepicker停止工作，我几乎尝试了所有事情，看看：

JS代码

<script type="text/javascript">
    (function () {
        $("#EDate").datepicker();
        $("#RDate").datepicker({ minDate: "-1d" });

        $("#divm").on("hidden.bs.modal", function () {
            $(".datepicker").datepicker("destroy");
            $(".datepicker").removeClass("hasDatepicker").removeAttr('id');
        })
    })();
</script>

剃刀代码

 @Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "EDate", @class = "form-control datepicker" } })
 @Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "RDate", @class = "form-control datepicker" } })

引导模式

<div id="divm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Embarcaciones" aria-hidden="true">
    <div class="modal-dialog" style="text-align:right">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <div style="text-align:left">
                    <h4 class="modal-title" id="mTitulo">Nueva Embarcaci&oacute;n</h4>
                </div>
            </div>
            <div id="mEdit" class="modal-body" style="width:100%; text-align:center">
                @{Html.RenderPartial("_myclass", Model.Myclass);}
            </div>
        </div>
    </div>
</div>

我在jquery ui css上添加了z-index

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    z-index: 9999999 !important;
}

正如你所看到的，我已经尝试了几乎所有的东西，但我不知道我还能做些什么，感谢你提供任何帮助

Answer 1

您正在从元素中删除id属性，因此您无法再次找到它们来重新连接datepicker。获取removeAttr('id')的ID：

http://jsfiddle.net/TrueBlueAussie/uhpxcm4j/15/

 $(function () {
     $("#divm").on("show.bs.modal", function () {
         console.log("show.bs.modal");
         $("#EDate").datepicker();
         $("#RDate").datepicker({
             minDate: "-1d"
         });
     });

     $("#divm").on("hidden.bs.modal", function () {
         console.log("hidden.bs.modal");
         $("#EDate,#RDate").datepicker("destroy").removeClass('datepicker').removeClass("hasDatepicker");
     });

     $("#nuevo").click(function(){
         $("#divm").modal("show").show();
     });

 });

注意我做了其他更改，只是为了让它在那个小提琴中工作。

datepicker在局部视图中工作一次mvc 5

1 个答案: