AngularJS ввод даты французский

Question

Я хотел использовать input[date] внутри формы, чтобы позволить пользователям использовать поддержку современных браузеров, не используя javascript datepicker. Для тех, кто использует не поддерживающие браузеры, я установил маску пользовательского интерфейса. Оба работают вместе. Я использую французский формат (дд / мм / ГГГГ).

<input type="date" ng-model="myDate" ui-mask="99/99/9999">
$scope.myDate = new Date("2016-02-12"); // works
$scope.myDate = "12/02/2016"; // Doesn't...

В пустом виде, без проблем, Angular принимает это. Но с заполненной формой Angular ожидает формат даты, который мне не нужен: YYYY-mm-dd (объект даты javascript).

Я не могу понять, почему Angular поддерживает только этот формат, а не другие, такие как французский формат. Потому что я хочу, чтобы на входе [date] отображался французский формат, а не стандартный!

Многие современные браузеры предоставляют интересную поддержку для дат, я не могу понять, почему Angular это тратит.

А может я что то пропустил?

Answer 1

Для достижения вашей цели нужно использовать momentJs а также ngModel$parsers а также $formatters, Ниже приведен пример кода и JSFiddle:

В вашем контроллере вы подготавливаете строковое значение во французском формате даты:

$scope.myDate= '12/02/2016';

Ввиду этого вы устанавливаете это значение на атрибут ngModel input[type=date] элемент:

<input class="form-control" type="date" ng-model="myDate">

Вам нужно создать новую директиву, ее можно назначить input элемент:

.directive('input', function(dateFilter) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            if (
                'undefined' !== typeof attrs.type && 'date' === attrs.type && ngModel
            ) {
                ngModel.$formatters.push(function(modelValue) {
                    return moment(modelValue, "DD/MM/YYYY").toDate();
                });

                ngModel.$parsers.push(function(viewValue) {
                    return moment(viewValue).format("DD/MM/YYYY");
                });
            }
        }
    }
})

Новая функция в $formatters массив изменяет ваш myDate к объекту даты javascript (с парсером момента это довольно просто). Новая функция в массиве $parsers изменяет значение входного элемента обратно во французскую строку даты.

Это решение обеспечивает двустороннюю связь между вашим myDate а также input[type=date] элемент.:)

Посмотрите на пример JSFiddle