13 ответов
Хотя подобные ответы были отправлены, я хотел бы внести то, что, казалось, было самой легкой и самой чистой фиксацией мне. Принятие Вы используете AngularUI datepicker, и Ваше начальное значение для ng-модели не становится отформатированным просто добавление, что следующая директива к Вашему проекту устранит проблему:
angular.module('yourAppName')
.directive('datepickerPopup', function (){
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
}
});
я нашел это решение в проблемы GitHub AngularUI , и поэтому весь кредит переходит к людям туда.
Можно использовать $parsers как показано ниже, это решило его для меня.
window.module.directive('myDate', function(dateFilter) {
return {
restrict: 'EAC',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(viewValue) {
return dateFilter(viewValue,'yyyy-MM-dd');
});
}
};
});
HTML:
<p class="input-group datepicker" >
<input
type="text"
class="form-control"
name="name"
datepicker-popup="yyyy-MM-dd"
date-type="string"
show-weeks="false"
ng-model="data[$parent.editable.name]"
is-open="$parent.opened"
min-date="minDate"
close-text="Close"
ng-required="{{editable.mandatory}}"
show-button-bar="false"
close-on-date-selection="false"
my-date />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePicker($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
Я столкнулся с той же проблемой и после нескольких часов входа и исследования, я зафиксировал его.
оказалось, что впервые значение установлено в средстве выбора даты, $viewValue является строкой, таким образом, dateFilter отображает его, как. Все, что я сделал, проанализировать его в объект Даты.
Поиск того блока в ui-bootstrap-tpls файле
ngModel.$render = function() {
var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
element.val(date);
updateCalendar();
};
и замене это:
ngModel.$render = function() {
ngModel.$viewValue = new Date(ngModel.$viewValue);
var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
element.val(date);
updateCalendar();
};
, Надо надеяться, это поможет :)
Эти format указанный до datepicker-popup всего формат для отображенной даты . Лежание в основе ngModel является объектом Даты. Попытка отобразить его покажет его, поскольку это - стандартно-совместимое представление по умолчанию.
можно показать его, как Вы хотите при помощи эти date, просачиваются представление, или, если Вам нужен он, чтобы быть проанализированными в контроллере, можно ввести $filter в контроллере и назвать его как $filter('date')(date, format). См. также документы .
Можно использовать средства форматирования после выбора значения в datepicker директиве. Например
angular.module('foo').directive('bar', function() {
return {
require: '?ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.push(function(value) {
if (value) {
// format and return date here
}
return undefined;
});
}
};
});
ССЫЛКА .
С таким количеством ответов, уже записанных, Вот мое взятие.
С Угловыми 1.5.6 & ui-начальная-загрузка 1.3.3, просто добавьте это на модели & Вы сделаны.
ng-model-options="{timezone: 'UTC'}"
Примечание : Используйте это, только если Вы обеспокоены датой, являющейся 1 днем позади & не побеспокоенный дополнительным временем T00:00:00.000Z
Обновленный Plunkr Здесь:
Все предлагаемые решения не работали на меня, но самый близкий был от @Rishii.
я использую AngularJS 1.4.4 и Начальную загрузку UI 0.13.3.
.directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) {
return {
restrict: 'EAC',
require: 'ngModel',
priority: 1,
link: function(scope, element, attrs, ngModel) {
var dateFormat = 'yyyy-MM-dd';
ngModel.$parsers.push(function(viewValue) {
return dateFilter(viewValue, dateFormat);
});
ngModel.$validators.date = function (modelValue, viewValue) {
var value = modelValue || viewValue;
if (!attrs.ngRequired && !value) {
return true;
}
if (angular.isNumber(value)) {
value = new Date(value);
}
if (!value) {
return true;
}
else if (angular.isDate(value) && !isNaN(value)) {
return true;
}
else if (angular.isString(value)) {
var date = dateParser.parse(value, dateFormat);
return !isNaN(date);
}
else {
return false;
}
};
}
};
}])
Я могу зафиксировать это путем добавления ниже кода в моем файле JSP. Теперь и модель и значения UI - то же.
<div ng-show="false">
{{dt = (dt | date:'dd-MMMM-yyyy') }}
</div>
Шаги для изменения формата даты по умолчанию ng-модели
Для различных форматов даты проверяют jqueryui datepicker значения формата даты здесь, например, я использовал дд/мм/гг
, Создают angularjs направляющую
angular.module('app', ['ui.bootstrap']).directive('dt', function () {
return {
restrict: 'EAC',
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
ngModel.$parsers.push(function (viewValue) {
return dateFilter(viewValue, 'dd/mm/yy');
});
}
}
});
Запись dateFilter, функция
function dateFilter(val,format) {
return $.datepicker.formatDate(format,val);
}
В странице HTML пишут атрибут ng-modal
<input type="text" class="form-control" date-type="string" uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt />
Определение новой директивы для работы вокруг ошибки не действительно идеально.
, поскольку datepicker отображает более поздние даты правильно, одно простое обходное решение могло просто устанавливать образцовую переменную в NULL сначала, и затем к текущей дате через некоторое время:
$scope.dt = null;
$timeout( function(){
$scope.dt = new Date();
},100);
datepicker (и datepicker-всплывающее-окно) директива требует, чтобы ng-модель была объектом Даты. Это документируется здесь .
, Если Вы хотите, чтобы ng-модель была строкой в определенном формате, необходимо создать директиву обертки. Вот пример ( Plunker):
(function () {
'use strict';
angular
.module('myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('MyController', MyController)
.directive('myDatepicker', myDatepickerDirective);
MyController.$inject = ['$scope'];
function MyController ($scope) {
$scope.dateFormat = 'dd MMMM yyyy';
$scope.myDate = '30 Jun 2017';
}
myDatepickerDirective.$inject = ['uibDateParser', '$filter'];
function myDatepickerDirective (uibDateParser, $filter) {
return {
restrict: 'E',
scope: {
name: '@',
dateFormat: '@',
ngModel: '='
},
required: 'ngModel',
link: function (scope) {
var isString = angular.isString(scope.ngModel) && scope.dateFormat;
if (isString) {
scope.internalModel = uibDateParser.parse(scope.ngModel, scope.dateFormat);
} else {
scope.internalModel = scope.ngModel;
}
scope.open = function (event) {
event.preventDefault();
event.stopPropagation();
scope.isOpen = true;
};
scope.change = function () {
if (isString) {
scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat);
} else {
scope.ngModel = scope.internalModel;
}
};
},
template: [
'<div class="input-group">',
'<input type="text" readonly="true" style="background:#fff" name="{{name}}" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="internalModel" is-open="isOpen" ng-click="open($event)" ng-change="change()">',
'<span class="input-group-btn">',
'<button class="btn btn-default" ng-click="open($event)"> <i class="glyphicon glyphicon-calendar"></i> </button>',
'</span>',
'</div>'
].join('')
}
}
})();<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="myExample">
<div ng-controller="MyController">
<p>
Date format: {{dateFormat}}
</p>
<p>
Value: {{myDate}}
</p>
<p>
<my-datepicker ng-model="myDate" date-format="{{dateFormat}}"></my-datepicker>
</p>
</div>
</body>
</html>После проверки вышеупомянутых ответов я придумал это, и она работала отлично, не имея необходимость добавлять дополнительный атрибут к Вашей разметке
angular.module('app').directive('datepickerPopup', function(dateFilter) {
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
ngModel.$parsers.push(function(viewValue) {
return dateFilter(viewValue, 'yyyy-MM-dd');
});
}
}
});
Наконец я получил работу вокруг к вышеупомянутой проблеме. угловая полоска имеет точно ту же функцию, которую я ожидаю. Только путем применения date-format="MM/dd/yyyy" date-type="string" я получил свое ожидаемое поведение обновления ng-модели в данном формате.
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
<input type="text" autoclose="true" class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker>
</div>
<hr>
{{selectedDate}}
</form>
</div>
здесь работает, роняют ссылка