Используйте jQuery DatePicker и jQuery Mask с 4-летней датой на одном входе - PullRequest
Новая
       34

Используйте jQuery DatePicker и jQuery Mask с 4-летней датой на одном входе

0 голосов
/ 08 июня 2011

У нас есть текстовое поле, которое мы хотим запустить как средство выбора даты jQuery UI, а также иметь возможность вводить текст от руки в текстовое поле. В настоящее время мы достигаем этого с помощью маски jQuery UI и DatePicker в одном текстовом поле. Однако мне пришлось «взломать» маску, чтобы заставить ее работать - потому что, как только вы введете свободный текст, введите: 04/29/19

Затем, прежде чем вы сможете завершить ввод "83", чтобы завершить четырехзначную дату, DatePicker запускает какое-то событие, которое перемещает текущую дату DatePicker на ту, которую вы вводите, но также удаляет всю дату до сих пор. Таким образом, цель состояла в том, чтобы ввести дату: 29.04.1983, но средство выбора даты удалило то, что у меня было до сих пор. Сначала мы думали, что маска виновата, но теперь мне просто нужно выяснить, как убить событие datepicker от ошибочного запуска. Любая помощь будет так ценится!

Извините, пример кода: 

$('#txbxSocialHistoryDate').datepicker({
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true
 });

$('#txbxSocialHistoryDate').mask("99/99/9999", { placeholder: " " });

Ответы [ 2 ]

1 голос
/ 09 июня 2011

Ответ на этот вопрос определенно работает. Однако без триггерной кнопки я придумал решение: 

$('#txbxSocialHistoryDate').datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yyyy',
            onSelect: function (dateText, inst) {
                UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(this, 'txbxSocialHistoryDate', dateText);
            },
            onClose: function (dateText, inst) {
                UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(this, 'txbxSocialHistoryDate', dateText);
            }
});

$('#txbxSocialHistoryDate').mask("99/99/9999", { placeholder: " " });

function UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(thisDatePicker, txbxOfDatePicker, dateText) {
    // when the calendar closes, determine if this was entered by hand, or by the calendar
    var textInBox = $('#' + txbxOfDatePicker).val();

    // if by the calendar, it will have 2 years attached, so we then shave the 2nd year off the end
    // there is a brief flash of the incorrect year, but short of taking off both the masking & calendar on this one textbox, this will work...
    if (textInBox.length > 10) {
        $('#' + txbxOfDatePicker).val(dateText.substring(0, dateText.length - 4));
    }

    // this fixes the tabbing issue mentioned; now when you tab out of the calendar, it will move on to the appropriate control...
    thisDatePicker.focus();
}

Итак, что я сделал:

  • Объявите указатель даты, но сделайте формат: «мм / дд / гггг», который, как я ошибочно считал, выглядит так. Однако на сайте определения jQuery DateFormat это фактически делает дату, если она выбрана, форматированной как: мм / дд / ггггггг (год повторяется дважды). 'yy' == 4 цифры года в DateFormat, по-видимому. Эта первоначальная ошибка привела меня к ответу.
  • Маскируйте поле даты, к которому вы уже привязали свой указатель даты.
  • При более длинном вводе даты событие, которое запускает удаление моей маски, останавливается. Все, что мне нужно было сделать, - это добавить этот пользовательский метод, который я создал в функциях onSelect и onClose для средства выбора даты, и теперь все работает. По сути, он удаляет двойной год, который является ненужным и неправильным в выборе даты. Маскировка и средство выбора даты с четырехзначным форматом года теперь работают вместе.
1 голос
/ 09 июня 2011

У меня была та же проблема, но это не проблема JQuery datepicker, проблема в плагине MASK, jquery запускает событие, когда вы пишете 2 или 4 цифры в год, но когда событие вызывается, также вызывается событие MASK, и конфликт происходит. Решением может быть средство выбора даты JQuery с включенной маской.

Я решил свою проблему с помощью триггерной кнопки, потому что, если пользователь хочет сделать запись даты, он просто вводит дату и хорошо, но, если он хочет, чтобы выбор, просто нажмите на триггер кнопки.

попробуй. http://jqueryui.com/demos/datepicker/#icon-trigger

...