Jquery datepicker在第一次点击时不弹出，但在第二次点击时弹出答案

【问题标题】：Jquery datepicker not popping up on first click ,but pops up on second clickJquery datepicker在第一次点击时不弹出，但在第二次点击时弹出
【发布时间】：2013-02-14 16:10:54
【问题描述】：

我遇到了 jquery datepicker 的问题。

我将 jquery datepicker 附加到 javascript 函数中动态生成的文本框。

问题是日期选择器在第一次点击时没有弹出，如果我在 javascript 函数中放置断点或警报，则日期选择器会在第一次单击时弹出。

这是我正在使用的 JavaScript 函数：

function CalendarPopUpOnClick(TextBoxId, HiddenFieldId) {
    if (TextBoxId != undefined) {
        $('#' + serverIdPrefix + TextBoxId).keypress(function (event) {
            event.preventDefault();
        });
        var dateTimeDueDate = $('#' + serverIdPrefix + HiddenFieldId).val();
        var dateTimeArrDueDate = dateTimeDueDate.split(" ");
        var dateOnlyDueDate = dateTimeArrDueDate[0];
        $('#' + serverIdPrefix + TextBoxId).val(dateOnlyDueDate);

        setTimeSpanBeginInput = function () {
            var dateTime = $('#' + serverIdPrefix + HiddenFieldId).val();
            var dateTimeArr = dateTime.split(" ");
            var dateOnly = dateTimeArr[0];
            $('#' + serverIdPrefix + TextBoxId).val(dateOnly);
        }
        $('#' + serverIdPrefix + TextBoxId).datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (dateText) {
                $('#' + serverIdPrefix + HiddenFieldId).val(dateText + ' 12:00:00 PM');
            },
            onClose: setTimeSpanBeginInput
        });
    }
}

【问题讨论】：

控制台有错误吗？
你确定你没有把事情复杂化吗？
不，我没有收到任何错误
代替这个：if (TextBoxId != undefined) 你可以使用：if(TextBoxId) 只是有点短。不是吗？
您使用了很多长变量，使用相同的复杂代码一遍又一遍地选择相同的元素。您可能可以将其缩短到一半，事实上，我已经这样做了 -> Fiddle ??

标签： c# javascript jquery asp.net datepicker

【解决方案1】：

谢谢大家，

抱歉更新晚了。

我已经使用以下代码进行了此操作。

正如@adeneo 指出的那样，我正在使用 C# 和 Asp.Net。

我正在从后面的 C# 代码创建两个动态文本框，并将 javascript 函数添加到文本框的 onclik 事件中，如下所示：

 DeliveryDateTextBox.Attributes.Add("onClick", "javascript:CalendarPopUpOnClick('" + DeliveryDateTextBox.ClientID + "','" + Hiddenfield_DeliveryDateTextBox.ClientID + "');");


DueDateTextBox.Attributes.Add("onClick", "javascript:CalendarPopUpOnClick('" + DueDateTextBox.ClientID + "','" + Hiddenfield_DueDateTextBox.ClientID + "');");

并在 Javascript 文件中添加以下代码：

$(document).ready(function()
{
/* Get id prefixes for checkboxes, checkbox control elements */
var exampleId = $("input[use='proprietary']").attr("id");
var serverIdPrefixEndPos = exampleId.indexOf("exampleID");
serverIdPrefix = exampleId.substring(0,serverIdPrefixEndPos);

/* Datepicker BEGIN */
setTimeSpanBeginInput = function(){
                                var dateTime = $('#'+ serverIdPrefix +'timeSpanFromDeliveryDateHiddenField').val();
                                var dateTimeArr = dateTime.split(" ");
                                var dateOnly = dateTimeArr[0];
                                $('#'+ serverIdPrefix +'timeSpanFromDeliveryDate').val(dateOnly);
                            } //when calendar closed, copy hidden field value to main date field
$('#'+ serverIdPrefix +'timeSpanFromDeliveryDate').datepicker({dateFormat: 'yy-mm-dd', onSelect: function(dateText){ $('#'+ serverIdPrefix +'timeSpanFromDeliveryDateHiddenField').val(dateText + ' 12:00:00 PM'); }, onClose: setTimeSpanBeginInput});

setTimeSpanEndInput = function(){
                                var dateTime = $('#'+ serverIdPrefix +'timeSpanToDateHiddenField').val();
                                var dateTimeArr = dateTime.split(" ");
                                var dateOnly = dateTimeArr[0];
                                $('#'+ serverIdPrefix +'timeSpanToDeliveryDate').val(dateOnly);
                            } //when calendar closed, copy hidden field value to main date field
$('#'+ serverIdPrefix +'timeSpanToDeliveryDate').datepicker({dateFormat: 'yy-mm-dd', onSelect: function(dateText){ $('#'+ serverIdPrefix +'timeSpanToDateHiddenField').val(dateText + ' 12:00:00 PM'); }, onClose: setTimeSpanEndInput});

/* Datepicker END */



});//end document ready 
function CalendarPopUpOnClick(TextBoxId, HiddenFieldId) 
{

    if (TextBoxId) {
        var textBox     = $('#' + serverIdPrefix + TextBoxId),
            hiddenField = $('#' + serverIdPrefix + HiddenFieldId);

        textBox.focus();

         $(":input").bind('paste', function(e) {
        setTimeout(function() {
         var dateval =hiddenField.val();
              if(dateval.indexOf('0001-01-01')==-1)
                textBox.val(  hiddenField.val().split(" ")[0]  );
              else
                textBox.val('');  
        }, 100);
        });            

        textBox.keypress(function(event) {event.preventDefault();});
        hiddenField.keypress(function(event) {event.preventDefault();});
        var dateTime = hiddenField.val();
        var dateTimeArr = dateTime.split(" ");
        var dateOnly = dateTimeArr[0];
        textBox.datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (dateOnly) {
                hiddenField.val(dateOnly + ' 12:00:00 PM');
            },
            onClose: function() {
              var dateval =hiddenField.val();
              if(dateval.indexOf('0001-01-01')==-1)
                textBox.val(  hiddenField.val().split(" ")[0]  );
            }
        });
       textBox.datepicker().datepicker('show');
    }
}

【讨论】：