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

【问题标题】：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 动态是什么意思？

标签： javascript c# jquery asp.net datepicker

【解决方案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");
});

【讨论】：