在AngularJ无法正常工作的情况下更改输入日期的格式 [英] Changing the format of an input date with AngularJs not working as expected
问题描述
好吧，我想显示一个输入日期字段，但是格式更改了.
Well, I want to show an input date field but with the format changed.
我的意思是，默认格式为:yyyy-MM-dd (2015-11-20)，但是我想要它:(11-20-2015).
I mean, the default format is: yyyy-MM-dd (2015-11-20), but I want it: (11-20-2015).
我用momentjs找到了一个 jsfiddle (没有角度)，并且完全可以按我的意愿工作
There's a jsfiddle I found with momentjs (without angular) and works exactly as I want.
使用AngularJs，我也使用了指令，但是使用了 span字段(并且可以工作).但是，如果我输入日期，那是行不通的.
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.
这是 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);
这是柱塞.有想法吗?
推荐答案
好，我已经通过两种方式解决了我的问题:
Well, I have solved my issue in 2 ways:
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;
};
});
2)使用Javascript本机Date对象
attrs.$set('myCurrentDate', dateFilter(date, format));
但是在两种情况下，都需要借助CSS:
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:注意在两种情况下变量 $ scope.format 的定义之间的区别.
PS: Note the difference between the definition of the variable $scope.format in both cases.
但是，如果我们不希望复杂化，可以使用出色的 datepicker 来自AngularUI.它具有很多功能.
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
这篇关于在AngularJ无法正常工作的情况下更改输入日期的格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
