jQuery Datepicker手动输入的格式日期
我有一个jQuery日期选择器,格式为dd-MM-yyyy 默认情况下,日期选择器将日期(如1-2-3和1-2-99)分别转换为01-02-2003和01-02-1999。但是,只有按enter键或从日期选择器中选择日期时,才会出现这种情况。我尝试在离开字段时使用以下命令自动格式化字段:jQuery Datepicker手动输入的格式日期,jquery,jquery-ui,datepicker,Jquery,Jquery Ui,Datepicker,我有一个jQuery日期选择器,格式为dd-MM-yyyy 默认情况下,日期选择器将日期(如1-2-3和1-2-99)分别转换为01-02-2003和01-02-1999。但是,只有按enter键或从日期选择器中选择日期时,才会出现这种情况。我尝试在离开字段时使用以下命令自动格式化字段: $j('.datepicker').live('blur', function(){ $j(this).datepicker('setDate', $j(this).datepicker('getDat
$j('.datepicker').live('blur', function(){
$j(this).datepicker('setDate', $j(this).datepicker('getDate'));
});
在本例中,我使用的是日期选择器本身的实用函数setDate和getDate。当您使用键盘和TAB键(例如)输入日期时,此功能会起作用。但是,当您尝试用鼠标拾取日期时,模糊触发器也会激活。因此,您必须用鼠标选择两次日期,因为模糊事件的第一次日期将设置回旧值
是否有我遗漏的事件可以使用
解决方法
不是很优雅,但这是一个局部解决方案:
var timeout;
$j('#geboortedatum').live('keypress', function() {
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(formatDate, 1000);
});
function formatDate() {
var gebdat = $j('#geboortedatum').val();
var dashCount = gebdat.split('-').length - 1;
if(dashCount == 2 && gebdat.length >= 5) {
$j('#geboortedatum').datepicker('setDate', $j('#geboortedatum').datepicker('getDate'));
}
}
$('input.datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
try {
dateText = dateText.replace(/-(19|20)?/g,'');
dateText = dateText.replace(/\/(19|20)?/g,'');
if (dateText) {
dateText = dateText.substr(0,2)+'-'+dateText.substr(2,2)+'-'+dateText.substr(4,2);
$(this).datepicker('setDate', dateText);
}
} catch (err) {
alert(dateText);
}
}
};
您可以使用该事件,但随后您必须确定有多少输入构成了值得尝试自动格式化的内容
就个人而言,我更喜欢限制textbox接受的输入。为此,我推荐jQuery。我讨厌死灰复燃,但这是“jQuery datepicker autoformat”的第一个搜索结果!我没有找到任何好的解决方案,所以我基本上就是这么做的:
jQuery('#my_selecter').datepicker().keyup(function(e){
if(e.keyCode != '8'){
if (e.target.value.length == 2) e.target.value = e.target.value + "/";
if (e.target.value.length == 5) e.target.value = e.target.value + "/";
}
})
所有这些都放在斜线中,因此用户可以快速键入日期。它也不会与删除按钮发生冲突。请记住,这只适用于美国地区,并忽略其他方面的问题(主键、制表键等)。我只在datepicker istelf中使用onClose事件:
$(function(){
var $myDate = $('#myDate');
$myDate.datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
$(this).datepicker('option', 'dateFormat', 'dd-mm-yy');
}
});
}));
最后一个示例几乎正确,我对它进行了一些调整,因此它实际上正确设置了日期并检查了无效日期
$("#ClientDOB").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-MM-yy',
defaultDate: "1-January-70",
onClose: function(dateText, inst) {
try {
var d = $.datepicker.parseDate('dd-mm-yy', dateText);
$(this).datepicker('setDate',d.getDate()+'-'+monthNames[d.getMonth()]+'-'+d.getFullYear());
} catch (err) { // what to do if it errors, just set to date 40 years ago
d=new Date();
$(this).datepicker('setDate',"1-January-"+(d.getFullYear()-40));
}
}
});
我的解决方案:
var timeout;
$j('#geboortedatum').live('keypress', function() {
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(formatDate, 1000);
});
function formatDate() {
var gebdat = $j('#geboortedatum').val();
var dashCount = gebdat.split('-').length - 1;
if(dashCount == 2 && gebdat.length >= 5) {
$j('#geboortedatum').datepicker('setDate', $j('#geboortedatum').datepicker('getDate'));
}
}
$('input.datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
try {
dateText = dateText.replace(/-(19|20)?/g,'');
dateText = dateText.replace(/\/(19|20)?/g,'');
if (dateText) {
dateText = dateText.substr(0,2)+'-'+dateText.substr(2,2)+'-'+dateText.substr(4,2);
$(this).datepicker('setDate', dateText);
}
} catch (err) {
alert(dateText);
}
}
};
接受以下格式:
dd-mm-yyyy (20th or 21th century)
dd-mm-yy
ddmmyy
dd/mm/yyyy
dd/mm/yy
以下是一个简单的解决方案(参见Brad的解决方案了解用法):
此外,如果您的目标是允许使用多种输入日期格式,请参阅我在此处对此主题的回答:
但我想允许用户输入较短的符号,如1-2-3。按键结合检查长度是否大于等于5和#破折号是否等于2,延迟1秒,也许值得一试。@Serkan-如果这对你有效,那就太好了。然而,这种较短的符号可能真的是有问题的,因为它完全是不标准和不明确的。想一想,仅仅因为日期
1/2/2003
在某些地区意味着“2003年1月2日”,而在其他地区意味着“2003年2月1日”,就会出现多少问题。我完全同意这一点。但它是用于内部网站点/应用程序的,我们可以假设它们都使用日-月-年表示法。@Serkan-足够公平了。内联网应用程序肯定是在不同的假设下运行的。顺便说一句,如果您希望实现“长度>=5和#破折号=2,延迟1秒”的检查,那么我肯定会推荐使用此选项。