为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用ng-model格式化日期?

/ 猿问

如何使用ng-model格式化日期?

SMILET 2019-12-17 14:32:29

我有一个输入定义为


<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

将其显示在页面的其他位置:


<tr>

    <th>Birth Date</th>

    <td>{{client.birthDate|date:'mediumDate'}}</td>

</tr>

当页面加载时,出生日期的格式很好,类似于Dec 22, 2009。但是,当我查看自己<input>的内部时,它显示为Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)我猜想的是JS如何将Date对象呈现为字符串。


首先,我如何告诉Angular将日期显示<input>为12/22/2009?我似乎无法|filters在ng-model属性内应用。


其次,一旦我编辑了日期,即使将其保留为原始格式,我的其他文本(位于中<td>)似乎也不再应用|date过滤器;它突然更改了格式以匹配输入文本框的格式。如何在|date每次模型更改时应用过滤器?


查看完整描述

3 回答

?
千万里不及你

使用表单的自定义验证http://docs.angularjs.org/guide/forms演示:http : //plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview


使用格式化程序和解析器以及MomentJS的指令)


angModule.directive('moDateInput', function ($window) {

    return {

        require:'^ngModel',

        restrict:'A',

        link:function (scope, elm, attrs, ctrl) {

            var moment = $window.moment;

            var dateFormat = attrs.moDateInput;

            attrs.$observe('moDateInput', function (newValue) {

                if (dateFormat == newValue || !ctrl.$modelValue) return;

                dateFormat = newValue;

                ctrl.$modelValue = new Date(ctrl.$setViewValue);

            });


            ctrl.$formatters.unshift(function (modelValue) {

                if (!dateFormat || !modelValue) return "";

                var retVal = moment(modelValue).format(dateFormat);

                return retVal;

            });


            ctrl.$parsers.unshift(function (viewValue) {

                var date = moment(viewValue, dateFormat);

                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";

            });

        }

    };

});


查看完整回答
反对 回复 2019-12-17
?
偶然的你

这是非常方便的指令angular-datetime。您可以像这样使用它:


<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

它还会在输入中添加掩码并执行验证。


查看完整回答
反对 回复 2019-12-17
?
LEATH

我创建了一个简单的指令,以使标准input[type="date"]表单元素能够与AngularJS〜1.2.16一起正常工作。


看这里:https : //github.com/betsol/angular-input-date


这是演示:http : //jsfiddle.net/F2LcY/1/


查看完整回答
反对 回复 2019-12-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信