jquery

Question

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

看起来是这样的：

current state

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

这是我的简单代码：

<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');
    })

})

Answer 1

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

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

Answer 2

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

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

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

jquery - 模态形式内的日期选择器

jquery - datepicker inside modal form

javascript

modal-dialog

datepicker