Изменение формата входной даты с AngularJs не работает должным образом

Ну, я хочу показать поле ввода даты , но с измененным форматом.Изменение формата входной даты с AngularJs не работает должным образом

Я имею в виду, что формат по умолчанию: yyyy-MM-dd (2015-11-20), но я хочу этого: (11-20-2015).

Есть jsfiddle Я нашел с momentjs (без углового) и работает точно так, как я хочу.

Работа с AngularJs, я тоже сделал с директивой, но с полем (и работает). Но если я использую дату ввода, это не сработает.

Это HTML:

<body ng-app="docsTimeDirective"> 
    <div ng-controller="Controller"> 
    Current date is: <span my-current-time="format"></span><hr/> 
    <input type="date" ng-model="myDate.value" my-current-time="format"> 
</div> 
</body>

И Js:

(function(angular) { 
    'use strict'; 
angular.module('docsTimeDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
    $scope.format = 'MM/dd/yyyy'; 
    $scope.myDate = { 
     value: new Date() 
    }; 
    }]) 
    .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) { 

    function link(scope, element, attrs) { 
     var format, 
      timeoutId; 

     function updateTime() { 
     element.text(dateFilter(new Date(), format)); 
     console.log(dateFilter(new Date(), format)); 
     } 

     scope.$watch(attrs.myCurrentTime, function(value) { 
     format = value; 
     updateTime(); 
     }); 

     element.on('$destroy', function() { 
     $interval.cancel(timeoutId); 
     }); 

     // start the UI update process; save the timeoutId for canceling 
     timeoutId = $interval(function() { 
     updateTime(); // update DOM 
     }, 1000); 
    } 

    return { 
     link: link 
    }; 
    }]); 
})(window.angular);

Вот Plunker. Некоторые идеи?

источник

2015-11-20 robe007

Ну, я решил мою проблему в 2 способами:

1) С MomentJs

attrs.$set('myCurrentDate', momentFilter(date, format));

, а затем

.filter('moment', function() { 
    return function (date, formated) { 
     moment.locale('es'); 
     var momented = moment(date).format(formated); 
     return momented; 
    }; 
});

See the Plunker

2) С помощью Javascript нативный Дата объекта

attrs.$set('myCurrentDate', dateFilter(date, format));

See the Plunker

Но в обоих случаях, с помощью CSS:

input:before { 
    position: absolute; 
    top: 3px; left: 3px; 
    content: attr(my-current-date); 
    display: inline-block; 
    color: black; 
}

PS: Обратите внимание на разницу между определение переменной $ scope.format в обоих случаях.

EDIT:

Но если мы не хотим осложнений, мы можем использовать отличную от datepicker AngularUI. Он имеет множество функций.

И это взять меня к 3 пути для решения моего вопроса: See the Plunker

источник

2015-11-20 22:30:34 robe007

Это потому, что .text() не распространяется на элемент <input />. Вместо этого вам понадобится .val().

Вы можете сделать очень простой чек, чтобы обойти оба случая. Обратите внимание на следующее (непроверенные) ...

element[0].value !== undefined ? element.val(/*...*/) : element.text(/*...*/)

Кроме того за обсуждения, имейте в виду total lack of cross browser support для type="date". Возможно, поиск на полке datepicker может быть в ваших интересах здесь - вероятно, также устраняя трудности с ограничением формата.

источник

2015-11-20 17:46:32 scniro

Ok, я попробовал его с 'element.val (dateFilter (новый Дата(), формат));' и броски: * * 'Указанное значение« 11/20/2015 »не соответствует требуемому формату« yyyy-MM-dd »' ** – robe007

с именем «type =» date »- это должно быть в этом формате , Подтвердили ли вы возвращаемое значение вашей даты, которое возвращает 'dateFilter'? [Здесь скрипка] (http://jsfiddle.net/etpo7L8d/), которая показывает ввод даты, работающий в его простейшей форме. – scniro

Вы видите plunkr? В поле 'span' возвращает дату, как я хочу. – robe007

Изменение формата входной даты с AngularJs не работает должным образом

ответ

Смежные вопросы