Jquery日期选择器在第一次点击时不会弹出,但在第二次点击时会弹出
Jquery datepicker not popping up on first click ,but pops up on second click
我面临jquery日期选择器的问题。
我将jquery日期选择器附加到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
});
}
}
谢谢大家,
抱歉更新太晚。
我已经用以下代码实现了这一点。
正如@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');
}
}
相关文章:
- Javascript Select OnChange没有'不要第二次工作
- 相同的RegExp返回不同的结果-第一次是正确的结果,第二次是null
- 单击仅在第二次单击后有效
- 推特引导:弹出窗口不会在第一次点击时出现,但会在第二次点击时显示
- 第二次点击具有不同功能的按钮并更改文本
- 更改第二次推送时不起作用的元素高度
- 在第二次选择中选择2更改属性
- on(“点击”)仅在第二次点击后触发
- 在HTML中,如果第二次加载相同的脚本文件,它还会被加载吗
- 从第一个日期选择器定义第二个日期选择器的开始日期
- Sails.js/Waterline.add()和.remove()仅适用于第二次调用
- 尝试在两次迭代中警告同一选择器的值,在第一次迭代中得到正确的值,而在第二次迭代中获得不正确的值.为什么?
- java脚本中的谷歌地图在第二次点击时不起作用
- 更改类名后,将第二次单击事件附加到元素
- 日期选择器 getDate 方法在第二次单击时工作并显示上一个选定的日期
- 添加使用 JS 的日期输入的第二次使用使它们都不起作用
- 为什么日期选择器在自动打开第二个日期选择器上第一次更改月份时显示同月
- 通过传递所需字段的字符串值对列表进行排序,并在JavaScript中按日期进行第二次排序
- Jquery日期选择器在第一次点击时不会弹出,但在第二次点击时会弹出
- 日期选择器UI停止,函数不会第二次运行