Нестандартный input: дата и месяц
Подскажите, пожалуйста, как сверстать такой инпут:
Стандартный тип date предлагает формат: дата.месяц.год.
Я так понимаю, здесь нужно задать инпуту тип number и возможность ввести два двузначных числа, разделённых автоматически подставляемых слешем. При этом обоим числам должны быть заданы диапазоны, и второе число должно распознаваться как невалидное, в зависимости от первого, поскольку в разных месяцах разное количество дней.
Для меня это сложная задача в нескольких аспектах.
- Как подставить автоматический слеш?
- Как сделать, чтобы в одно поле вводилось два числа, и распознавались они тоже как два числа, а не как одно?
- Как настроить зависимость между первым и вторым числами?
Ответы (2 шт):
На инпут вешаете обработчик на ввод с клавиатуры. В нем проверяете количество введенных символов, думаю можно сделать валидацию, отсеять буквы, спецсимволы и пробелы. После ввода двух цифр, можно добавить автоматом слеш, просто к строке + "/" и вернуть, или привоить инпуту, ну и дальше еще две цифры также. Можно слеш попробовать сделать через css с помощью :after
Нашла более простое решение: регулярные выражения через свойство pattern. Хотя слеш тут нужно ставить вручную, и зависимость второго числа от первого не устанавливается, можно очень легко добиться более-менее приемлемого эффекта. http://html5pattern.com/