Расширение компонентов пользовательского интерфейса jQuery (переопределение jQuery Datepicker для предотвращения неправильного ввода)

Я пытаюсь расширить jQuery UI Datepicker для добавления некоторых валидаций.

Я много искал в Интернете, но я не мог получить никакой помощи. Я нашел SO question jquery-datepicker-function-override, нет способа изменить поведение textinput, компонент datepicker поддерживает только событие onSelect, которое запускается после того, как дата выбрана не тогда, когда мы меняем дату с помощью textinput.

Я создал скрипт, чтобы показать проблему.

У меня есть два сборщика дат, оба показывают неправильные даты. В этом случае сборщик даты показывает текущую дату системы. Первая текстовая запись содержит 05-ddd-2014, а вторая - 05 марта 2014 года, обе являются неправильными датами.

Проблема

ПРИМЕЧАНИЕ.

Я знаю, как использовать компонент datepicker, я хочу поддержать проверку при нажатии/вводе клавиатуры. Мне нужно расширить компонент jQuery UI Datepicker. Вопрос не в формате даты. Чтобы упростить вопрос, я выбираю простой формат (dd-M-yy (i.e 02-Feb-2014)). Вопрос заключается в обработке события изменения ввода текста в случае неправильных дат.

В настоящее время я поддерживаю только один формат ввода dd-M-yy (т.е. 02 февраля 2014 года).

Когда я вхожу в любой неправильный формат непосредственно в текстовом вводе (то есть 02-xxx-2014), в списке выбора даты отображается текущая дата системы ( текущее поведение).

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

Я попытался использовать событие keydown для textinput, но иногда он не давал правильную клавишу, может быть jQuery UI Datepicker обрабатывает это событие.

$('#datepicker').on("keydown", function(e) {
    var val = this.value;
    var ar = val.split("-");
    // dd - parse the date, do the required validation
    console.log( ar[0], isNaN(ar[0]) );
});

Есть ли какая-либо лучшая практика для расширения jQuery UI Datepicker или jQuery UI conmponents вообще.

Ответ 1

Вы можете попробовать использовать $.datepicker.parseDate( format, value, settings ) в событии blur, если функция возвращает и исключение, например

Можно выделить несколько исключений:

"Недопустимые аргументы", если формат или значение равно null

'Отсутствует номер в позиции nn', если в формате указано числовое значение это не обнаружено

'Неизвестное имя в позиции nn', если формат указан день или месяц это не обнаружено

'Неожиданный литерал в позиции nn', если формат указывает буквальный значение, которое затем не найдено

Если вы подняли в catch, вы можете показать свое предупреждение и принудительно сфокусироваться на поле.

код:

$(".datepicker").datepicker({
    dateFormat: "dd-M-yy",
    showOtherMonths: true

}).on("blur", function (e) {
    var curDate = $(this).val();
    try {
        var r = $.datepicker.parseDate("dd-M-yy", curDate);
    } catch(e) {
        alert('Not VALID!');
        $(this).focus()
    }
});

Демо: http://jsfiddle.net/IrvinDominin/L6e6q/

UPDATE

Вы можете создать собственный виджет, например ui.datepicker2 usinf ui.widget.factory.

Создавать плагины jQuery с поддержкой состояния, используя ту же абстракцию, что и все Виджеты jQuery UI.

Используя его, вы можете расширить значения по умолчанию и связать события keydown и keyup.

В keydown хранятся старое значение, а на клавиатуре проверяют ввод, а если нет, восстановите старое значение.

код:

$.widget("ui.datepicker2", {
    _init: function () {
        var $el = this.element;
        $el.datepicker(this.options);

        if (this.options && this.options.checkDate) {
            $el.on("keydown", function (e) {
                var curDate = $el.val();
                $el.attr("oldValue", curDate);
                return true;
            });
            $el.on("keyup", function (e) {
                var curDate = $el.val();
                try {
                    var r = $.datepicker.parseDate("dd-M-yy", curDate);
                } catch (ex) {
                    alert('Not VALID!');
                    $el.val($el.attr("oldValue"));
                    $el.focus();
                }
            });
        }
    }
});

$(".datepicker").datepicker2({
    dateFormat: "dd-M-yy",
    showOtherMonths: true,
    checkDate: true
})

Демо: http://jsfiddle.net/IrvinDominin/GLWT3/

Ответ 2

Попробуйте это,

JsFiddle

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-M-dd" });

    $('#datepicker').on("keyup", function(e) {

    var val = this.value;
        if(!ValidateDate(val)){
        console.log("Date must be 2014-Mar-01 Format")
        }



});
  });


function ValidateDate(dtValue)
{
    console.log(dtValue)
var patt = new RegExp(/^20\d\d-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(0[1-9]|[12][0-9]|3[01])$/);
var res = patt.test(dtValue);
return res;
}