我必须单击两次才能让日期选择器显示

Posted 2023-04-13

【中文标题】我必须单击两次才能让日期选择器显示

【英文标题】：i have to click twice to let the datepicker show

【发布时间】：2016-11-17 04:00:48

【问题描述】：

我创建了一个显示 datepicker 的 jquery 代码，它运行良好，但我需要单击文本框两次才能让 datepicker 退出。我尝试使用$(document).ready(function ()，但我不工作。所以我做了这个代码

$("[id*=txtDatePO]").live("click",function () 
        $(this).datepicker(
            //buttonImage: '../Images/Icons/calendar_1_icon&16.png',
            //buttonImageOnly: true,
            //showOn: 'both',
            dateFormat: 'yy-mm-dd',
            inline: true,
            firstDay: 1,
            showOtherMonths: true,
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

        );
    );

    $("[id*=txtDelDate]").live("click", function () 
        $(this).datepicker(
            dateFormat: 'yy-mm-dd',
            inline: true,
            firstDay: 1,
            showOtherMonths: true,
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        );
    );

如何将其更改为当用户单击文本框一次时，日历将一键显示。谢谢！

【问题讨论】：

好吧，你把它移到document.ready。究竟是什么不适合这种方法？

jQuery live 已弃用，请改用：api.jquery.com/on

日期选择器元素是动态添加的吗？

@Esko 'on' 不起作用。

@AdamAzad 动态是什么意思？

【参考方案1】：

虽然我从未使用过日期选择器，但如果我理解正确，点击事件似乎是内置的：

这是一个我分叉和修改的示例，用于测试现有和动态（创建）元素： http://jsfiddle.net/julienetienne/shzwaL7v/1/

var dynamicElement = document.createElement('input');
var body = document.getElementsByTagName('result')[0];

dynamicElement.id = 'input3';
dynamicElement.type ='text';
document.body.insertBefore(dynamicElement,$('#input2').get(0));

$('#input1').datepicker(
   dateFormat: 'dd-mm-yy'
);

$('#input2').datepicker(
   dateFormat: 'dd-mm-yy'
);

$(dynamicElement).datepicker(
   dateFormat: 'dd-mm-yy'
);



<input id="input1" type="text" />
<input id="input2" type="text" />

没有理由使用 document.ready() 或 .live()。只要代码在页面加载后执行，它就应该可以工作。

【参考方案2】：

应该在document ready

$(document).ready(function () 
     $('#txtDatePO').datepicker(
            todayHighlight: true,
            orientation: "bottom left",
            autoclose: true
     );
);

顺便说一句，这个示例引导日期选择器

【参考方案3】：

您需要将 datepicker("show") 与您的点击事件绑定，这对我有用

$("[id*=txtDatePO]").live("click",function () 
    $(this).datepicker(
        //buttonImage: '../Images/Icons/calendar_1_icon&16.png',
        //buttonImageOnly: true,
        //showOn: 'both',
        dateFormat: 'yy-mm-dd',
        inline: true,
        firstDay: 1,
        showOtherMonths: true,
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

    ).datepicker("show");
);