更改不在引导模式窗口中工作的月份和年份

Change month and year not working in bootstrap modal window

本文关键字：工作 窗口 模式      更新时间：2023-09-26

在我的项目中，我使用的是jquery日期选择器。它在所有页面中都运行良好，但在引导模式窗口中不起作用。下面是我加载日期选择器的代码。

  $("#StartDate").datepicker({
                                changeMonth : true,
                                changeYear : true,
                                dateFormat : "yy-mm-dd",
                            });

现在，我无法从日期选择器下拉列表中更改月份和年份。如何解决此问题？任何帮助都将不胜感激！！！

在搜索更多信息时，我发现它已经在另一篇StackOverflow帖子中得到了回答。以下是一些工作代码，取自

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

试试这个。

为什么不使用bootstrap日期选择器？

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

如果模态已经存在，那么您可以尝试本答案中提到的事件委派。

$(function() {
   $("body").delegate("#StartDate", "focusin", function(){
      $(this).datepicker();
   });
});

您还可以尝试增加StartDate文本框的z索引

#StartDate {
    z-index: 100000;
}

它肯定会起作用。我在模式窗口中摆弄了jquery-ui-datepicker。看看：https://jsfiddle.net/kr20nu8n/2/

html:

<button id="openModalButton">open modal</button>
<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <input placeholder="click for datepicker" type="text" id="datepicker">
        </div>
    </div>
</div>

JS:

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
});
$("#openModalButton").click(function () {
    $('#myModal').modal();
});

也许如果你可以发布你的完整代码，我们可以找到导致这种情况的错误。

<input class="form-control" type="text" data-provide="datepicker" data-date-format="yyyy/mm/dd" data-date-autoClose="true"/>

试试这个。它在Chrome中运行良好。顺便说一句，我正在使用bootstarp日期选择器！

相关文章：