Формат даты в jQuery DatePicker при ручном вводе

Question

У меня есть средство выбора даты jQuery в формате: dd-MM-гггг.

По умолчанию средство выбора даты преобразует такие даты, как 1-2-3 и 1-2-99 до 01-02-2003 и 01-02-1999 соответственно.Однако это только тот случай, когда вы нажимаете ввод или выбираете дату из средства выбора даты.Я попытался автоматически отформатировать поле при выходе из поля, используя:

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

В этом случае я использую функцию полезности setDate и getDate самого Datepicker.Это работает, когда вы вводите дату с помощью клавиатуры и, например, клавиши 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

Я просто использую событие onClose в datepicker istelf:

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

Answer 3

Мое решение:

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

Ненавижу возрождать мертвый пост, но это был первый результат поиска для "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, клавиша табуляции и т. Д.).

Answer 5

Вот простое решение (см. Решение Брэда для использования):

// 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

Answer 6

этот последний пример был почти верным, я немного его подправил, поэтому он правильно устанавливает дату и проверяет ее на недопустимость.

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