[英]Jquery datepicker not popping up on first click ,but pops up on second click
I am facing an issue with jquery datepicker. 我遇到了jQuery datepicker问题。
I am attaching the jquery datepicker to dynamically generated text boxes in a javascript function. 我将jQuery datepicker附加到javascript函数中动态生成的文本框中。
The issue is that the datepicker doesn't popup at first click, if i place a break point or alert inside the javascript function, then the datepicker pops up on first click itself. 问题是,日期选择器在第一次单击时不会弹出,如果我在javascript函数中放置了一个断点或警报,则日期选择器会在第一次单击时弹出。
This is the JavaScript function i am using: 这是我正在使用的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
});
}
}
Thank you All, 谢谢你们,
Sorry for the late update. 抱歉,更新晚了。
I have got this working with the following code. 我已经用下面的代码来工作了。
I am using C# and Asp.Net as @adeneo pointed out. 我正在使用C#和Asp.Net,如@adeneo所指出的。
I am creating two dynamic textboxes from C# code behind and adding the javascript function to onclik event of the textbox as given below: 我从后面的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 + "');");
and in the Javascript file i am adding the following code: 并在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');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.