Angular bootstrap datepicker и ручной ввод даты

Question

Я использую angularjs, угловой bootstap (this one) и их datepicker для ввода даты.

<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true"> 

Я хочу, чтобы иметь возможность изменить дату, выбранную datepicker вручную. Например, я выбрал 07.09.2013 в datepicker, и я хочу изменить его на 07.09.2012. Чтобы сделать это, я нажимаю на свой вход и нажимаю backspace, чтобы удалить последнюю цифру 3 и поставлю туда 2. Проблема в том, что когда я это делаю, моя ng-модель становится строкой из объекта Date, а datepicker не получает новую дату. Вы можете попробовать сделать это на странице угловой загрузки (используя firefox).

Я понимаю, что это нормальное поведение из-за текста типа ввода, который указывает браузеру, что пользователь может поместить туда любой текст, который он хочет, и директиву ng-model, потому что так оно и работает. Но есть ли обходной путь для этой проблемы? Я подумал, что мне нужно контролировать мою ng-модель, используя ng-change или $ watch и преобразовать ее в объект Date, используя библиотеки, упомянутые here (я не могу использовать Date.parse(), потому что мой формат даты недействителен для этой функции).

Вопрос: есть ли какое-либо другое решение этой проблемы? Любые конфиг-флаги или что-то угловое?

Answer 1

Насколько мне известно, такое поведение хорошо известно сообществу.

Возможно, существует возможное решение/обходное решение, описанное в wemove на this site, но не пробовал, но выглядит многообещающим.

Другая возможность заключается в том, чтобы непосредственно использовать базовый jquery datepicker, который (afaik) обернут угловой директивой. Именно так я делаю это для своего проекта, так как мне нужно предоставить как дату, так и ручной ввод.

Я сделал plnkr here, он уродлив, но он работает, т. Е. Вы можете либо использовать datepicker, либо ввести значение вручную.

Себ

Answer 2

date-picker-popup форматы директивы вывода в соответствии с форматом строки, которую вы укажете, тем не менее, он не анализирует значение, которое вы вводите непосредственно в элемент ввода. Для этого вам в настоящее время нужно написать собственный синтаксический анализ. Вот пример, который я использую:

evsDirectives.directive('dateParser', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      if (!ctrl) 
       return; 

      ctrl.$parsers.unshift(function (data) { 
       // convert data from view format to model format 
       return this.parseEuropeanShortDate(data); 
      }); 
     } 
    }; 

    //parses a date in dd/MM/yyyy format 
    //returns the input value if not a valid date 
    parseEuropeanShortDate: function (d) { 
     if (this.isDate(d)) { 
      return d; 
     } 
     else { 
      var fragments = d.split('/'); 
      var result = new Date(Date.UTC(fragments[2], fragments[1] - 1, fragments[0])); // converted 
      return (this.isValidDate(result)) ? result : d;  
     } 
    } 

}); 

Вы затем применить его к date-picker-popup входного элемента:

<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" date-parser> 

Answer 3

Самый простой способ:

1. Добавить нг-изменение = "OnChange() "в вашем теге:

   <input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" ng-change="onChange()">

2. Реализовать метод OnChange():

   $scope.onChange = function() { $scope.dt = $filter('date')($scope.dt, 'dd.mm.yyyy');
};