日期选择器自动打开

本文介绍了日期选择器自动打开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个javascript代码，我想使用它完成以下操作.我希望当我单击按钮时出现一个表单，但datepicker的日期选择选项不会自动出现(但在我的情况下会打开).所以换句话说，我要禁用该自动打开功能.这是脚本

I have a javascript code using which I want to accomplish the following . I want when i click on the button a form to appear but datepicker's date choosing option not to appear automatically (but in my case it opens up) . So in other words I wand disable that autoopen . Here is the script

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

推荐答案

datepicker立即显示的原因是，默认情况下，由于加载了datapicker的input具有focus. "http://jsfiddle.net/JXtBM/" rel ="noreferrer">请参见此处-这是因为它是表单上的第一个input....首先要好-> http://jsfiddle.net/JXtBM/1/

The reason the datepicker shows immediately is because the input the datapicker is loaded on has focus by default .. see here - this is because its the first input on a form .... if you add another input before the first its fine - > http://jsfiddle.net/JXtBM/1/

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

One way around this problem would be to use a button to trigger the opening of the datepicker :

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

此处的示例

这篇关于日期选择器自动打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！