我正在尝试构建一个小的日期时间指令,该指令允许用户选择具有三个下拉列表(日期,月份,年份)的日期,然后应将其解析为类似于YYYY-MM-DD HH:mm:ss
的字符串,以供服务器使用解释 - 这是我在ngModel中的变量。同样,如果存在默认值,则应将其格式化为具有组件值的对象。
format
应生成什么 '2012-09-27'
应该成为{ year: 2012, month: 'September', date: 27 }
parse
应生成什么 { year: 2008, month: 'October', date: 3 }
应该成为2008-10-03
。
目前,它没有按预期工作。这不是格式化日期问题,而是似乎是一个Angular管道问题(类似于我无法正确理解$parsers
和$formatters
如何工作)。
这是我的指令模板:
<select ng-model="datetimevalue.date" ng-options="day.value as day.display for day in days">
</select>
<select ng-model="datetimevalue.month" ng-options="month.value as month.display for month in months">
</select>
<select ng-model="datetimevalue.year" ng-options="year for year in years()">
</select>
这是我使用的指令:
<datetime ng-model="file.originated_at"></datetime>
这是我的指令代码:
angular.module('directives.datetime', []).directive('datetime', function() {
return {
require: 'ngModel',
restrict: 'E',
replace: true,
scope: {
datetimevalue: '=ngModel'
},
link: function($scope, element, attrs, ctrl) {
$scope.days = [];
$scope.days.push({ value: 0, display: '-'});
for (i = 1; i <= 31; i++) {
$scope.days.push({ value: i, display: i });
}
$scope.months = [
{ value: 0, display: '-'},
{ value: 1, display: 'January'},
{ value: 2, display: 'February'},
{ value: 3, display: 'March'},
{ value: 4, display: 'April'},
{ value: 5, display: 'May'},
{ value: 6, display: 'June'},
{ value: 7, display: 'July'},
{ value: 8, display: 'August'},
{ value: 9, display: 'September'},
{ value: 10, display: 'October'},
{ value: 11, display: 'November'},
{ value: 12, display: 'December'}
];
$scope.years = function() {
var years = [];
var currentYear = moment().year();
if (typeof $scope.startYear !== 'undefined') {
var startYear = $scope.startYear;
} else {
var startYear = 1950;
}
while (currentYear >= startYear) {
years.push(currentYear);
currentYear--;
}
return years;
};
//convert data from view format to model format
ctrl.$parsers.push(function(data) {
console.log(data);
return moment({
year: data.year,
month: data.month - 1,
date: data.date,
hour: data.hour,
minute: data.minute,
second: data.second
}).format('YYYY-MM-DD HH:mm:ss');
});
//convert data from model format to view format
ctrl.$formatters.push(function(data) {
var dt = moment(data);
console.log(data);
return {
year: dt.year(),
month: dt.month() + 1,
date: dt.date(),
hour: dt.hour(),
minute: dt.minute(),
second: dt.second()
}
});
},
templateUrl: '/js/templates/datetime.html'
}
});
现在,如果我使用日期选择器选择日期,则公开的父范围上的对象看起来像视图数据,而不是模型数据。
即。我期待2012-09-27
,但我有{ year: 2012, month: 'September', date: 27 }
。
对于它的价值,我使用moment.js
作为日期库。