Question

我有一个javascript代码，我想用它完成以下操作。我希望当我点击按钮时出现一个表单，但是datepicker的日期选择选项不会自动出现（但在我的情况下会打开）。所以换句话说，我的魔杖禁用了autoopen。这是脚本

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"     type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"     type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"     type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
                var dates2 = $("#datePicker3,#datePicker4").datepicker({
                    autoOpen: false,
                    minDate: 0,
                    changeMonth: true,
                    numberOfMonths: 1,
                    onSelect: function (selectedDate) {
                        var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                            instance = $(this).data("datepicker"),
                            date = $.datepicker.parseDate(
                            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                        dates2.not(this).datepicker("option", option, date);
                        calculate_total_price();
                    }

                }); ///
                $("#order-popup").dialog();
                $("#order-popup").show();
            });
        });
    </script>
    <input type="button" value="addclass" id="button">
    <div id="order-popup" style="display:none;" class="popup-content already-ordered">
        <input type="text" id="datePicker3" name="datepickerFrom" value="">
        <br/>
        <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
        </form>
    </div>
</body>

Answer 1

datepicker立即显示的原因是因为input datapicker加载focus默认为input。see here - 这是因为它表单上的第一个input ....如果您在第一个罚款之前添加另一个showOn: "button", buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif", buttonImageOnly: true, - ＆gt; http://jsfiddle.net/JXtBM/1/

解决此问题的一种方法是使用按钮触发打开日期选择器：

{{1}}

Working example here

Answer 2

如果你不想把焦点放在日期选择器上，你可以在它们之前加上另一个输入并让它“隐形”

<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <input style="height:0px; top:-1000px; position:absolute" type="text" value="">
    <input type="text" id="datePicker3" name="datepickerFrom" value="">
    <br/>
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
    </form>
</div>

在这种情况下，输入的高度为0px，并且不在屏幕之外，因此不会显示。请记住，应始终选择日期，由于日期格式，分隔符等原因，允许用户编写风险...

Answer 3

正如ManseUK所说，这是因为对话框方法会自动选择父元素中的第一个“tabbable”元素。执行此操作的硬编码，如another question所示。

一种解决方法（我认为看起来很奇怪，但有效），就是将选项卡索引设置为输入上方的另一个元素，如下所示：

<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <p tabindex="1">Choose Dates:</p>
    <input type="text" id="datePicker3" name="datepickerFrom" value="" />
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px" />
</div>

Answer 4

将标签索引设置为另一个元素帮助以解决问题，如下所示：

**<label tabindex="1">From Date:</label>**
<input type="text" name="from_date" id="from_date" readonly="readonly"  class="hasDatepicker">

<label>To Date</label>
<input type="text" name="to_date" id="to_date"  readonly="readonly" class="hasDatepicker">

Answer 5

创建后触发'模糊'可以解决我的问题。我认为这是一个工作场所，但它确实起到了作用。

我不想添加按钮来打开日历，也不想在我的文档中添加额外的输入。

$('[data-datepicker="datepicker"]').datepicker().trigger('blur');

Answer 6

尝试将datepicker初始化放在文档就绪回调中，如下所示：

$(document).ready(function(){

var dates2 = $( "#datePicker3,#datePicker4" ).datepicker({
                            autoOpen:false,
                            minDate:0,
                            changeMonth: true,
                            numberOfMonths: 1,
                            onSelect: function( selectedDate ) {
                                var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                                instance = $( this ).data( "datepicker" ),
                                date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings );
                                dates2.not( this ).datepicker( "option", option, date );
                                calculate_total_price();
                            }

 });
});

并且点击功能仅包含：

$("#order-popup").dialog();
$("#order-popup").show();

我不是100％确定这会起作用，但至少是正确的初始化方法（如果你已经在页面上有它，初始化就准备好了）

Answer 7

你可以通过删除$（“＃order-popup”）后的焦点来解决这个问题。show（）;

    $(document).ready(function () {
        $("#button").click(function () {
            var dates2 = $("#datePicker3,#datePicker4").datepicker({
                autoOpen: false,
                minDate: 0,
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function (selectedDate) {
                    var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                        instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                        instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates2.not(this).datepicker("option", option, date);
                    calculate_total_price();
                }

            }); ///
            $("#order-popup").dialog();
            $("#order-popup").show();
            $('#datePicker3, #datePicker4').blur();
        });
    });

Answer 8

最佳选择是在另一个元素上设置“autofocus”属性。当jquery打开对话框时，它将查找具有autofocus属性的元素并将焦点设置为它。如果未找到，则将焦点设置为第一个可见元素。<input type="text" id="txtDescription" autofocus />

Answer 9

我解决了这个问题，将其添加为我表单中的第一个字段。

日期选择器自动打开

9 个答案: