jquery - 模态表单内的日期选择器答案

【问题标题】：jquery - datepicker inside modal formjquery - 模态表单内的日期选择器
【发布时间】：2019-07-28 21:25:15
【问题描述】：

我有一个简单的模态表单，通过单击按钮触发。在该表单中，有两个日期选择器字段。单击按钮并打开模式表单后，第一个文本字段（日期选择器）立即处于活动状态并显示日期选择器日历。

看起来是这样的：

我不希望第一个字段处于活动状态，从头开始显示日历。而不是这个我想在点击文本字段后打开日期选择器。我该怎么做？

这是我的简单代码：

<form>
    <fieldset>
        <label for="firstDay">Wybierz pierwszy dzień</label>
        <input type="text" name="firstDay" id="firstDay" class="text ui-widget-content ui-corner-all">
        <label for="lastDay">Wybierz ostatni dzień</label>
        <input type="text" name="lastDay" id="lastDay" class="text ui-widget-content ui-corner-all"/>
        <input type="submit"/>
    </fieldset>
</form>

$(function(){

    $("#dialogForm").dialog({
        autoOpen: false,
        width:400,
        modal: true,
        buttons: {
            "Anuluj": function(){
                dialog.dialog("close")
            }
        }

    });
    $("#firstDay").datepicker(
        {
            firstDay: 1
        }
    );
    $("#lastDay").datepicker(
        {
            firstDay: 1
        }
    )


    $("#addButton").click(function(){
        $('#dialogForm').dialog('open');
    })

})

【问题讨论】：

标签： javascript jquery datepicker modal-dialog

【解决方案1】：

如果无法访问您的 CSS，无法确定地告诉您，但我相信这对您有用。在日期选择器的 css 中，设置display: none;。然后使用 js 代码，在使用下面的代码单击文本字段时设置display: block;（或您现在拥有的任何内容）。

$(document).on('click', 'input', function(){
    $(this).attr("style", "display: block;");
});

【讨论】：

【解决方案2】：

几天前我找到了更好的解决方案。但不幸的是，我现在找不到对我有帮助的帖子。

这是使输入字段处于非活动状态并且日历在开头隐藏的代码：

$(".addButton").click(function(){
    firstDay.datepicker("disable");
    lastDay.datepicker("disable");
    $('#dialogForm').dialog('open');
    firstDay.datepicker("enable");
    lastDay.datepicker("enable");
})

【讨论】：