Валидатор type="date" для min & max / AngularJS / Сниппеты Bootstrap

Валидатор type="date" для min & max

Демо пример проверки ввода данных добавляемой даты в диапазоне минимального и максимального значений с использованием angular-messages.js и Bootstrap.

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

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: AngularJS

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 303

Количество символов:

Посмотрели: 1962 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/3/303.html

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/5OZIDQ

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Snippet, ангуляр js, ангуляр, Angular, Bootstrap, ангулар, html, бутстрап, ангулар js

Поделился: IZOTOP

Добавлено: 2015-12-11 в 19:55

Метка: 1582102127

⇄ ⇅

<form class="form" name="form">
 <input id="date" class="form-control" type="date" name="date"
 min="{{min | date: 'yyyy-MM-dd'}}"
 ng-min="min"
 max="{{max | date: 'yyyy-MM-dd'}}"
 ng-max="max"
 ng-model="date">
 <div ng-messages="form.date.$error" ng-show="form.date.$invalid" style="color: red">
 <div ng-message="date">Неверная дата</div>
 <div ng-message="min">Должно быть >= min</div>
 <div ng-message="max">Должно быть <= max</div>
 </div>
 <pre>form.date.$error = {{form.date.$error | json}}</pre>
 </form>
<hr>
 <pre>date = {{date}}</pre>
 <pre>min = {{min}}</pre>
 <pre>max = {{max}}</pre>

var date = document.getElementById('date');
 
 function onChange() {
 var value = date.value;
 console.log('date:', value, typeof(value));
 }
 
 date.addEventListener('change', function(event) {
 console.log('date:', event.target.value, typeof(event.target.value));
 });

var app = angular.module('app', ['ngMessages']);
 app.controller('DatesCtrl', function($scope) {
 function createDate(date, days) {
 var d = new Date(date);
 d.setDate(date.getDate() + days);
 return d;
 }

var now = new Date();
 $scope.date = now;
 $scope.min = createDate(now, -5);
 $scope.max = createDate(now, +5);
 });
 </script>

</div>

</div></div>

BootstrapTema

Валидатор type="date" для min & max

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0