日期选择器自动打开答案

【问题标题】：Date Picker automatically opens日期选择器自动打开
【发布时间】：2012-04-02 17:47:52
【问题描述】：

我有一个 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>

【问题讨论】：

有什么用吗？ stackoverflow.com/questions/932420/…
我会重新设计日历并将该字段设为只读，并且仅在您单击按钮打开日历时才提交数据

标签： jquery

【解决方案1】：

datepicker 立即显示的原因是，datapicker 加载的input 默认具有focus .. see here - 这是因为它是表单上的第一个input .. .. 如果您在第一个之前添加另一个 input 就可以了 - > http://jsfiddle.net/JXtBM/1/

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

showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,

Working example here

【讨论】：

@user1204905 你为什么要这样做？您将向我点击输入 - 这将打开日期选择器！
你说“加载数据选择器有焦点”，我想要完全相反。
@user1204905 更新了我的答案 - 您可以使用与焦点不同的触发器 .. 例如按钮
@user1204905 第二个链接在对话框中有一个额外的input - 默认情况下，对话框中的第一个input 获得焦点，因此在日期选择器之前插入input 意味着它不会启动默认
能否给我一个最终答案或最终链接（不是每秒都修改）

【解决方案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，并且在屏幕之外，因此不会显示。请记住，应始终选择日期，由于日期格式、分隔符等，允许用户书写是有风险的......

【讨论】：

Excellet，因为我希望 DatePicker 正常工作（不喜欢额外的按钮）。
很遗憾我们不得不为这样一个简单的问题进行这样的破解，但这是唯一对我有用的解决方案。

【解决方案3】：

正如 ManseUK 所说，这是因为对话框方法会自动选择父元素中的第一个“可选项卡”元素。这样做是硬编码的，如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>

【讨论】：

我刚刚输入了那个 p 标签，然后就隐藏了。一切正常，谢谢。
小心隐藏它。在我的测试中，将其设置为 display:none 会导致它被跳过，因此输入再次成为焦点。
老实说，我没有理解你的意思，但隐藏空白 p 标签效果很好。在这种情况下你的东西有什么问题吗？
如果你的 p 标签是空的，唯一的问题是谷歌浏览器会在焦点周围设置一个光环，这样看起来很有趣。为避免这种情况，请将其添加到 p 元素：style="outline:none;"
谢谢安东尼。我忘了说我没有隐瞒什么。在按照您想要的方式进行样式设置后，也没有发现 chrome 有任何区别

【解决方案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">

【讨论】：

【解决方案5】：

创建后触发“模糊”为我解决了这个问题。我认为这是一种解决方法，但它确实有效。

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

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

【讨论】：

老实说，唯一对我来说在所有浏览器中都能完美运行的解决方案（其他解决方案在 Safari 中不起作用）。谢谢！
这对我不起作用。也许这取决于jQuery版本？我正在使用 1.9
您确定在正确的时间调用代码吗？我不确定这条线是否仍然适用于更新版本。您可以通过直接从浏览器 concole 调用该行来测试这一点。

【解决方案6】：

尝试将日期选择器初始化放在文档就绪回调中，如下所示：

$(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% 确定这会起作用，但至少是进行初始化的正确方法（如果页面上已经有它，请在准备就绪时进行初始化）

【讨论】：

【解决方案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();
        });
    });

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：