jQuery日期选择器手动输入日期格式化

Question

我有一个格式为dd-MM-yyyy的jQuery日期选择器。

默认情况下，日期选择器会将日期转换为如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('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'));
    }
}

- Serkan

Answer 1

我只是在日期选择器内部使用了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/

- Brad

Answer 2

你可以使用 keypress 事件，但是你需要决定多少输入内容才值得尝试自动格式化。

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

- Matt Ball

---

但我想允许用户输入更短的符号，比如1-2-3。可以尝试使用keypress与检查长度是否大于等于5和“短横线”的数量为2，延迟1秒钟来结合使用。 - Serkan

@Serkan - 如果这对您有效，那太好了。然而，这种更短的符号表示法可能会带来问题，因为它完全不标准化且含糊不清。想想有多少问题是由于日期“1/2/2003”在某些地区表示“2003年1月2日”，而在其他地区表示“2003年2月1日”引起的。 - Matt Ball

我完全同意。但它是用于内部网站/应用程序的，我们可以假设他们都使用日-月-年的记法。 - Serkan

@Serkan - 没错。局域网应用程序的运作肯定是基于不同的假设的。另外，如果你要实现“长度大于等于5且有2个连字符，并带有1秒延迟”的检查，那我一定推荐使用throttle/debounce插件来进行延迟处理。 - Matt Ball

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 + "/";
    }
})

这个功能只是添加了斜杠，方便用户快速输入日期。它也不会与删除键冲突。请注意，这仅适用于美国本地化，并忽略其他问题（home键、tab键等）。

- Luke The Obscure

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

- Edward Lanenga

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));
             }
      }
});

- Jon Soong

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://dev59.com/PVLTa4cB1Zd3GeqPZ2G2#53499829

- LePatay