使用 AngularJs 更改输入日期的格式未按预期工作 [英] Changing the format of an input date with AngularJs not working as expected
问题描述
好吧，我想显示一个输入日期字段，但格式已更改.
我的意思是，默认格式是:yyyy-MM-dd (2015-11-20)，但我想要:(11-20-2015).
有一个 jsfiddle 我发现了 momentjs(没有角度)和完全按照我的意愿工作.
使用 AngularJs，我也使用了指令，但使用了 span 字段(并且有效).但是如果我使用输入日期，它就不起作用.
这是html:
<div ng-controller="控制器">当前日期是:<span my-current-time="format"></span><hr/><input type="date" ng-model="myDate.value" my-current-time="format">还有 Js:
(函数(角度){'使用严格';angular.module('docsTimeDirective', []).controller('Controller', ['$scope', function($scope) {$scope.format = 'MM/dd/yyyy';$scope.myDate = {值:新日期()};}]).directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {功能链接(范围，元素，属性){var 格式，超时ID；函数更新时间(){element.text(dateFilter(new Date(), format));console.log(dateFilter(new Date(), format));}scope.$watch(attrs.myCurrentTime, function(value) {格式 = 值；更新时间();});element.on('$destroy', function() {$interval.cancel(timeoutId);});//启动 UI 更新过程；保存用于取消的 timeoutIdtimeoutId = $interval(function() {更新时间();//更新 DOM}, 1000);}返回 {链接:链接};}]);})(window.angular);这是Plunker.一些想法?
好吧，我已经通过两种方式解决了我的问题:
1) 使用 MomentJs
attrs.$set('myCurrentDate', momentFilter(date, format));然后
.filter('时刻', function () {返回函数(日期，格式化){时刻.locale('es');var momented = moment(date).format(formated);返回时刻；};});2) 使用 Javascript 原生日期对象
attrs.$set('myCurrentDate', dateFilter(date, format));但在这两种情况下，都借助 css:
input:before {位置:绝对；顶部:3px；左:3px；内容: attr(我的当前日期)；显示:内联块；颜色:黑色;}PS:注意变量 $scope.format 在这两种情况下的定义不同.
<小时>但如果我们不想复杂化，我们可以使用优秀的datepicker 来自 AngularUI.它有很多功能.
这将我带到解决我的问题的第三种方法:见 Plunker
Well, I want to show an input date field but with the format changed.
I mean, the default format is: yyyy-MM-dd (2015-11-20), but I want it: (11-20-2015).
There's a jsfiddle I found with momentjs (without angular) and works exactly as I want.
Working with AngularJs, I have done too with a directive, but with a span field (and works). But if I do with an input date, it doesn't works.
This is the 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>
And the 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);
Here is the Plunker. Some ideas?
Well, I have solved my issue in 2 ways:
1) With MomentJs
attrs.$set('myCurrentDate', momentFilter(date, format));
and then
.filter('moment', function () {
return function (date, formated) {
moment.locale('es');
var momented = moment(date).format(formated);
return momented;
};
});
2) With Javascript native Date object
attrs.$set('myCurrentDate', dateFilter(date, format));
But in both cases, with the help of css:
input:before {
position: absolute;
top: 3px; left: 3px;
content: attr(my-current-date);
display: inline-block;
color: black;
}
PS: Note the difference between the definition of the variable $scope.format in both cases.
EDIT:
But if we don't want complications, we can use the excellent datepicker from AngularUI. It has a lot of features.
And this take me to a 3rd way for solving my issue: See the Plunker
这篇关于使用 AngularJs 更改输入日期的格式未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
