jQuery 日期选择器对话框在任何版本的 Internet Explorer 中都不起作用
jQuery date picker dialog not working in any version of Internet Explorer
jQuery 日期选择器有一个奇怪的问题。在 Chrome、FF 中工作正常,但在 Internet Explorer 中,它的呈现方式与附图中的一样,甚至是 IE 11,正如您在没有日历的情况下看到的那样。
像这样呈现时没有控制台错误,我正在初始化:
$('.customDateInput').each(function (idx) {
var $this = $(this);
var defaultDate = $this.attr("value").replace(/-/g, ",");
var $datepicker = $this.parent().find(".datepicker");
var $spanElement = $this.parent().find(".datepicker-button span");
(function (picker, altField, defaultDate, spanElement) {
picker.datepicker({
yearRange: "c-75:c+10",
firstDay: 1,
dateFormat: 'D, d M yy',
changeMonth: true,
changeYear: true,
altField: altField,
altFormat: 'yy-mm-dd',
defaultDate: new Date(defaultDate),
onClose: function(dateText, inst) {
if (dateText) {
spanElement.html('<strong>'+dateText+'</strong>');
}
}
});
})($datepicker, $this, defaultDate, $spanElement);
});
$('.datepicker-button').click(function(){
$(this).parent().find(".datepicker").datepicker('show');
});
只是在寻找有关如何调试它的提示!
好吧,我终于弄明白了,问题在于传递默认日期,因为 IE 中的以下警告会破坏日历。
假设 defaultDate
保存日期为“2014,12,18”或无日期:
new Date('')
// NaN <- Chrome returns 无效日期,不破坏日历
new Date('2014,12,18')
// NaN <- Chrome returns 'Thu Dec 18 2014'
new Date(null)
// 1 月 1 日星期四 00:00:00 UTC 1970
new Date(undefined)
// NaN
new Date(2014,12,18)
// 1 月 18 日星期日(因为 JS 认为月份是 0-11)
解决方案是使用其中一个作为新的 Date() 参数:
new Date()
// 预期的当前日期
new Date(2014, 11, 18)
// 2014 年 12 月 18 日如预期
-
$('.customDateInput').each(function (idx) {
var $this = $(this);
var defaultDate = $this.attr("value").replace(/-/g, ",");
var $datepicker = $this.parent().find(".datepicker");
var $spanElement = $this.parent().find(".datepicker-button span");
(function (picker, altField, defaultDate, spanElement) {
/** Solution to issue **/
if(defaultDate) {
defaultDate = defaultDate.split(',');
defaultDate = new Date(defaultDate[0], defaultDate[1] - 1, defaultDate[2]);
} else {
defaultDate = null;
}
/** End of solution **/
picker.datepicker({
yearRange: "c-75:c+10",
firstDay: 1,
dateFormat: 'D, d M yy',
changeMonth: true,
changeYear: true,
altField: altField,
altFormat: 'yy-mm-dd',
defaultDate: new Date(defaultDate),
onClose: function(dateText, inst) {
if (dateText) {
spanElement.html('<strong>'+dateText+'</strong>');
}
}
});
})($datepicker, $this, defaultDate, $spanElement);
});
$('.datepicker-button').click(function(){
$(this).parent().find(".datepicker").datepicker('show');
});
jQuery 日期选择器有一个奇怪的问题。在 Chrome、FF 中工作正常,但在 Internet Explorer 中,它的呈现方式与附图中的一样,甚至是 IE 11,正如您在没有日历的情况下看到的那样。
像这样呈现时没有控制台错误,我正在初始化:
$('.customDateInput').each(function (idx) {
var $this = $(this);
var defaultDate = $this.attr("value").replace(/-/g, ",");
var $datepicker = $this.parent().find(".datepicker");
var $spanElement = $this.parent().find(".datepicker-button span");
(function (picker, altField, defaultDate, spanElement) {
picker.datepicker({
yearRange: "c-75:c+10",
firstDay: 1,
dateFormat: 'D, d M yy',
changeMonth: true,
changeYear: true,
altField: altField,
altFormat: 'yy-mm-dd',
defaultDate: new Date(defaultDate),
onClose: function(dateText, inst) {
if (dateText) {
spanElement.html('<strong>'+dateText+'</strong>');
}
}
});
})($datepicker, $this, defaultDate, $spanElement);
});
$('.datepicker-button').click(function(){
$(this).parent().find(".datepicker").datepicker('show');
});
只是在寻找有关如何调试它的提示!
好吧,我终于弄明白了,问题在于传递默认日期,因为 IE 中的以下警告会破坏日历。
假设 defaultDate
保存日期为“2014,12,18”或无日期:
new Date('')
// NaN <- Chrome returns 无效日期,不破坏日历new Date('2014,12,18')
// NaN <- Chrome returns 'Thu Dec 18 2014'new Date(null)
// 1 月 1 日星期四 00:00:00 UTC 1970new Date(undefined)
// NaNnew Date(2014,12,18)
// 1 月 18 日星期日(因为 JS 认为月份是 0-11)
解决方案是使用其中一个作为新的 Date() 参数:
new Date()
// 预期的当前日期new Date(2014, 11, 18)
// 2014 年 12 月 18 日如预期
-
$('.customDateInput').each(function (idx) {
var $this = $(this);
var defaultDate = $this.attr("value").replace(/-/g, ",");
var $datepicker = $this.parent().find(".datepicker");
var $spanElement = $this.parent().find(".datepicker-button span");
(function (picker, altField, defaultDate, spanElement) {
/** Solution to issue **/
if(defaultDate) {
defaultDate = defaultDate.split(',');
defaultDate = new Date(defaultDate[0], defaultDate[1] - 1, defaultDate[2]);
} else {
defaultDate = null;
}
/** End of solution **/
picker.datepicker({
yearRange: "c-75:c+10",
firstDay: 1,
dateFormat: 'D, d M yy',
changeMonth: true,
changeYear: true,
altField: altField,
altFormat: 'yy-mm-dd',
defaultDate: new Date(defaultDate),
onClose: function(dateText, inst) {
if (dateText) {
spanElement.html('<strong>'+dateText+'</strong>');
}
}
});
})($datepicker, $this, defaultDate, $spanElement);
});
$('.datepicker-button').click(function(){
$(this).parent().find(".datepicker").datepicker('show');
});