Как ввести только YYYY (формат года) в текстовое поле, используя angularjs

Question

<input type="date" id="exampleInput" name="input" ng-model="startYear"
                             placeholder="yyyy" min="1111" max="9999" />

Я пробовал выше, но не работал

Answer 1

<div date-input ng-model="date"></div>

Ваш шаблон директивы будет выглядеть так:

<input 
    id="exampleInput"
    type="number"  
    name="input" 
    ng-model="year"
    ng-change="setDate()"
    placeholder="yyyy" 
    min="1111" 
    max="9999"
/>

В то время как ваша фактическая директива будет выглядеть следующим образом:

.directive('dateInput', ['$filter', function($filter) {
    return {
      restrict: 'A',
      scope: {
        ngModel: '='
      },
      templateUrl: './dateInput.html',
      link: function(scope) {
        scope.$watch('ngModel', function(nv, ov) {
          if (!angular.isDefined(nv) && !angular.isDefined(ov)) {
            scope.ngModel = new Date();
            scope.year = _getYear(scope.ngModel);
          } else {
            scope.ngModel = new Date(nv);
          }
        })

        angular.extend(scope, {
          setDate: setDate
        })

        function _getYear(date) {
          return parseInt($filter('date')(date, 'yyyy'));
        }

        function setDate() {
          var year = parseInt(scope.year),
              date = new Date(year, 1, 1);
          scope.ngModel = date;
        }
      }
    }
  }]);

Итак, основная идея c заключается в том, чтобы извлечь год из ввода даты, используя угловые, встроенные в фильтр даты, или создайте новый объект даты, если значение не было передано, и сделайте то же самое. Отредактируйте его, а затем создайте новый объект даты и свяжите его с ngModel. Вы можете легко сделать то же самое для месяца и дня и заменить значения 1, которые передаются в конструктор объекта даты.

Обратите внимание, что вам также нужно передать дату, отформатированную так, чтобы объект Date мог ее прочитать.