正文 

当前位置： 首页 > 源码 >

日期选择器自动打开

     2023-05-07     11

关键词：

【中文标题】日期选择器自动打开【英文标题】：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>

【问题讨论】：

有什么用吗？ ***.com/questions/932420/… 我会重新设计日历并将该字段设为只读，并且仅在您单击按钮打开日历时才提交数据 【参考方案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 属性的元素并将焦点设置为它。如果没有找到，则将焦点设置到第一个可见元素。&lt;input type="text" id="txtDescription" autofocus /&gt;

【讨论】：

【参考方案9】：

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

【讨论】：

在日期选择器中选择日期后如何打开时间选择器

】在日期选择器中选择日期后如何打开时间选择器【英文标题】：Howtoopentimepickerafterselectingdateindatepicker【发布时间】：2020-02-2111:53:49【问题描述】：当日期选择器返回selecteddate时，代码应自动显示时间选择器。当时间选择器返... 查看详情

jQuery：日期选择器开始在对话框中打开，仅在 IE 中

】jQuery：日期选择器开始在对话框中打开，仅在IE中【英文标题】：jQuery:Datepickerstartsopenedindialog,onlyinIE【发布时间】：2012-06-0319:43:13【问题描述】：我在使用jQuery对话框时发现了一个有趣的错误，其中对话框中的第一个字段是日... 查看详情

按 esc 后无法打开日期选择器

】按esc后无法打开日期选择器【英文标题】：Unabletoopendatepickerafterpressingesc【发布时间】：2021-11-1909:22:54【问题描述】：我在只读文本框上有angularjs日期选择器，单击文本框时，会弹出日期选择器，按esc关闭日期选择器，但再次... 查看详情

选择日期后引导日期选择器不会自动关闭

】选择日期后引导日期选择器不会自动关闭【英文标题】：Bootstrapdatepickernotcloseautomaticallyafterpickingadate【发布时间】：2014-04-2604:01:20【问题描述】：我使用最新的Bootstrapdatepicker.js。一切正常，除了当我从下拉列表中选择一个日... 查看详情

点击图标打开 HTML5 日期选择器

】点击图标打开HTML5日期选择器【英文标题】：OpenHTML5datepickeroniconclick【发布时间】：2013-08-2200:40:16【问题描述】：我有一个HTML5日期选择器。当我单击日期选择器文本框时，它会打开。待办事项：我必须将事件更改为图标，但... 查看详情

图像/图标打开日期选择器

】图像/图标打开日期选择器【英文标题】：Animage/iconopensthedateselector【发布时间】：2015-07-1103:43:50【问题描述】：我有一个HTML/PHP网站，其中有一个图像图标（看起来像一个日历），我希望用户单击并打开默认的日期选择器。用... 查看详情

检查日期选择器是不是打开

】检查日期选择器是不是打开【英文标题】：Checkifdatepickerisopen检查日期选择器是否打开【发布时间】：2011-02-1607:37:57【问题描述】：我有一个带有日期选择器的字段。我想知道它是否开放。我试过了：$("#filter_date").datepicker("widg... 查看详情

打开日期选择器上的今天按钮

】打开日期选择器上的今天按钮【英文标题】：TurnonTodaybuttonondatepicker【发布时间】：2013-06-0504:31:42【问题描述】：我正在使用来自此来源http://jqueryui.com/datepicker/#buttonbar的日期选择器，我正在尝试让按钮栏上的“今天”按钮处... 查看详情

保持引导日期选择器始终打开

】保持引导日期选择器始终打开【英文标题】：keepbootstrapdatepickeralwaysopen【发布时间】：2018-06-2314:36:47【问题描述】：希望日期选择器始终可见，而不是在单击日历时。所以我只是想知道如何实现这一目标。我正在尝试KeepOpen=tru... 查看详情

在引导程序日期选择器中禁用日期的自动格式化

】在引导程序日期选择器中禁用日期的自动格式化【英文标题】：DisableAutoformattingofdateinbootstrapdatepicker【发布时间】：2018-05-2902:06:57【问题描述】：如果有人在日期选择器中手动输入无效日期（例如“%/4/12”），它会自动将其格... 查看详情

单击跨度时打开日期选择器

】单击跨度时打开日期选择器【英文标题】：Opendatepickeronspanclick【发布时间】：2018-04-0622:35:19【问题描述】：我的搜索表单如下。<divclass="search-bar-wrappercontainer-fluid"><divclass="row"><divclass="col-md-2"></div><divclass="c... 查看详情

Perl CGI 日期和时间选择器，自动填充当前日期和时间

】PerlCGI日期和时间选择器，自动填充当前日期和时间【英文标题】：PerlCGIDateandTimepickerwithautopopulatewithcurrentdateandtime【发布时间】：2017-01-2218:58:16【问题描述】：我已经使用perl创建了一个CGI表单，一切都很好，除了我很难找到... 查看详情

HTML5 日期选择器仅在第二次点击时打开

】HTML5日期选择器仅在第二次点击时打开【英文标题】：HTML5Datepickeropensuponlyon2ndclick【发布时间】：2014-10-2609:35:57【问题描述】：我正在为我的日期日历日期框使用HTML5日期选择器(inputtype="date")。但是在Nexus7Chrome36和Motoroll... 查看详情

根据月份文本自动化日期选择器

】根据月份文本自动化日期选择器【英文标题】：Automatedate-pickerbasedonmonthtext【发布时间】：2021-10-3122:38:01【问题描述】：我正在尝试自动化页面上的日期选择器，并且我想点击上一个/下一个按钮，直到我到达日历中所需的月份... 查看详情

使用 Alpine 创建一个“始终打开的日期选择器”|活线

】使用Alpine创建一个“始终打开的日期选择器”|活线【英文标题】：Creatingan\'alwaysopendatepicker\'withAlpine|Livewire【发布时间】：2020-11-2008:35:35【问题描述】：我正在尝试使用Livewire和Alpine创建一个刀片组件作为日期选择器。我使用... 查看详情

通过单击复选框打开日期选择器并设置新日期

】通过单击复选框打开日期选择器并设置新日期【英文标题】：Openadatepickerbyclickingoncheckboxandsetnewdate【发布时间】：2017-10-1406:56:53【问题描述】：我正在使用bootstrap-datepicker-rails，有一个问题我无法解决。我有以下结构：<divcla... 查看详情

如何在 xamarin android ui 测试自动化中使用日期选择器

】如何在xamarinandroidui测试自动化中使用日期选择器【英文标题】：howtoworkwithdatepickerinxamarinandroiduitestautomation【发布时间】：2017-02-2710:31:05【问题描述】：我在xamarinandroidUI自动化中工作，我只是想知道如何从android日期选择器中... 查看详情

使 eternicode 日期选择器在点击时打开，而不是焦点

】使eternicode日期选择器在点击时打开，而不是焦点【英文标题】：Makeeternicodedatepickeropenonclick,notfocus【发布时间】：2014-01-0521:13:27【问题描述】：eternicodetwitterbootstrapdatepicker会在其附加到的&lt;input&gt;字段获得焦点时立即弹... 查看详情