Директива AngularJS для предотвращения ввода недопустимой даты

Question

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

Формат даты должен быть «MM/DD/YYYY», поэтому у меня есть маска на входе «99/99/9999». Хотя это заставляет пользователя вводить только цифры и автоматически форматирует его так, как мне нужно, проблема заключается в том, что это позволяет пользователю вводить что-то вроде «53/49/6540», что является недопустимой датой.

Попытка 1

Связывание функции с/KeyDown нажатие клавиши события.

• У меня есть регулярное выражение, которое может проверять дату по мере их ввода (так что это позволяет «12», но не «13» за месяц, например).
• Все выглядит хорошо .. но ... начинает показывать некоторые странные результаты при редактировании
  • Допустим вход «10/21/1999»
  • Они хотят изменить месяц до «12».
  • Так они положили их курсор после «0» и нажмите Backspace,
  • Значение теперь «12/11/999» и недействительным, предотвращая вход
  • Или они просто выделите «0» и случайно попал " 3" вместо "2", она будет проходить через, став "13/21/1999", а затем недействительным, предотвращение дальнейшего ввода

Попытка 2

Binding функцию к ключ/измененное событие.

• Я получаю старое значение, новое значение и подтвердите его, и вернуться к старому, если он недействителен
• Это создает странный опыт пользователя, как они смотрят, что они ввели в удаляются и установить обратно, который мне не нравится вообще
• не позволяет пользователю забой, если недействительным, так как он возвращается его
• Тем не менее позволяет недопустимые данные через если наберется достаточно быстро

Помощь

Есть ли какой-либо способ подтвердить дату, когда они печатают ее (а не после факта), не имея странных вещей?

Plunkr показывающие вопросы:http://embed.plnkr.co/0qbiiiRnIo9SuJ5xNe30/preview

Answer 1

После игры с ним больше я смог придумать решение, которым я доволен. Думал, что я хотел бы поделиться в случае, если кто-нибудь было интересно:

Plunkr:http://embed.plnkr.co/gE1WXaXsYI7zpWPkmvVS/preview

В принципе, я наткнулся на «SelectionStart» и «selectionEnd» свойства элемента, что позволяет захватывать индекс, где новое значение будет вставлено на клавиатуре. Таким образом, я смог получить «новое значение», так сказать, взяв старое значение и вставив символ, введенный в правильное положение, подтвердите его и не допустим нажатия клавиши «недействительно».

Другая вещь, которую я сделал по-другому, - это удалить все слэши и пробелы, которые вставляли маскирование (_ _/_ _/_ _ _ _), и меняло мое регулярное выражение только на основе чисел (например, «12121900») , который позволяет пользователю переходить/вставлять символы в любой момент, не получая странных «123/19/90» вариантов вариаций, которые потерпят неудачу.

Это не совсем идеально, но лучше, по крайней мере.

Answer 2

Вы можете изменить ваш первый подход немного. Вы сказали, что привязываете событие keyup/down, а затем проверяете ввод, поэтому не перехватывайте ключевое событие backspace (keycode 8), то есть не проверяйте ввод, когда пользователь нажимает клавишу backspace.

Теперь вы также можете добавить тайм-аут около 3 секунд, чтобы, если пользователь не изменит ввод, вы можете подтвердить свой ввод и сообщить пользователю о дате.