I am facing an issue with jquery datepicker.
I am attaching the jquery datepicker to dynamically generated text boxes in a javascript function.
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.
This is the JavaScript function i am using:
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.
I am creating two dynamic textboxes from C# code behind and adding the javascript function to onclik event of the textbox as given below:
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:
$(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');
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.