Question

我有一个jQuery datepicker，格式为：dd-MM-yyyy。

默认情况下，datepicker会将 1-2-3 和 1-2-99 等日期转换为 01-02-2003 ， 01-02-1999 分别。但是，只有当您按Enter键或从datepicker中选择日期时才会出现这种情况。我尝试使用以下方式在离开字段时自动格式化字段：

$j('.datepicker').live('blur', function(){
    $j(this).datepicker('setDate', $j(this).datepicker('getDate'));
});

在这种情况下，我正在使用Datepicker本身的实用程序函数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'));
    }
}

Answer 1

我只是在datepicker istelf中使用onClose事件：

$(function(){
    var $myDate = $('#myDate');
    $myDate.datepicker({
      dateFormat: 'dd-mm-yy',
      onClose: function(dateText, inst) {
          $(this).datepicker('option', 'dateFormat', 'dd-mm-yy');                
    }
});

}）;

http://jsfiddle.net/RpUSL/

Answer 2

你可以使用keypress事件，但是你必须决定输入多少值得尝试自动格式化。

就个人而言，我更喜欢限制文本框接受的输入。为此，我建议使用jQuery Masked Input plugin。

Answer 3

讨厌重新发帖，但这是“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 + "/";
    }
})

所有这些都放在斜杠中，因此用户可以快速输入日期。它也不会与删除按钮战斗。请记住，这只适用于美国语言环境，并忽略其他内容（主页键，标签键等）的问题。

Answer 4

我的解决方案：

$('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

Answer 5

这最后一个例子几乎是正确的，我稍微调整了一下，所以它实际上正确设置了日期并检查无效日期。

$("#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));
             }
      }
});

Answer 6

这是一个简单的解决方案（有关用法，请参见Brad的解决方案）：

// Reformats the input when you leave the field
onClose: function (dateText, inst) {
    // Get current datepicker's options
    var format = $(this).datepicker("option", "dateFormat");
    var settings = $(this).datepicker("option", "settings");
    // Parse input string
    var curDate = $.datepicker.parseDate(format, dateText, settings);
    // If it is indeed a date
    if (typeof curDate !== "undefined") {
        // Update input field with formatted date
        $(this).datepicker("setDate", curDate);
    }
}

此外，如果您的目标是允许使用多种输入日期格式，请在此处查看有关此主题的答案： https://stackoverflow.com/a/53499829/5426777

手动输入的jQuery Datepicker格式日期

6 个答案: