Question

我正在使用angularjs，angular bootstap（this one）及其日期选择器来输入日期。

<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true">

我希望能够手动更改datepicker选择的日期。例如，我在datepicker中选择了07.09.2013，我想将其更改为07.09.2012。要做到这一点，我点击我的输入并点击退格键删除最后一个数字3并放在那里2.问题是，当我这样做时，我的ng模型成为Date对象的字符串，而datepicker没有捕获新的日期。您可以尝试在角度bootstap页面上执行此操作（使用firefox）。

我理解这是正常行为，因为输入类型文本表示用户可以在其中放置任何他想要的文本的浏览器，以及ng-model指令，因为这是它的工作原理。但这个问题有解决方法吗？我认为我需要使用ng-change或$ watch监控我的ng模型，并使用提到的here库将其转换为Date对象（我不能使用Date.parse（），因为我的日期格式不是对此功能有效。）

我的问题是：这个问题有什么不同的解决方案吗？任何配置标志或角度特定的东西？

Answer 1

据我所知，这种行为是社区所熟知的。

this site上可能有 wemove 描述的可能的解决方案/解决方法，虽然没有尝试，但看起来很有希望。

另一种可能性是直接使用底层的jquery datepicker，其中（afaik）由angular指令包装。这就是我为我的项目做的方式，因为我需要同时提供datepicker和手动输入。

我制作了一个plnkr here，它很难看，但是它可以正常工作，即您可以使用日期选择器或手动输入值。

Seb

Answer 2

date-picker-popup指令根据您指定的格式字符串格式化输出，但是，它不会解析您直接输入到input元素中的值。要做到这一点，你目前必须编写自己的解析。这是我使用的一个例子：

evsDirectives.directive('dateParser', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            if (!ctrl)
                return;

            ctrl.$parsers.unshift(function (data) {
                // convert data from view format to model format
                return this.parseEuropeanShortDate(data);
            });
        }
    };

    //parses a date in dd/MM/yyyy format
    //returns the input value if not a valid date
    parseEuropeanShortDate: function (d) {
        if (this.isDate(d)) {
            return d;
        }
        else {
            var fragments = d.split('/');
            var result = new Date(Date.UTC(fragments[2], fragments[1] - 1, fragments[0])); // converted
            return (this.isValidDate(result)) ? result : d;     
        }
    }

});

然后将其应用于date-picker-popup输入元素：

<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" date-parser>

Answer 3

最简单的方法：

在输入标记中添加ng-change =“onChange（）”

<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" ng- change="onChange()">
实现onChange（）方法：

$scope.onChange = function () { $scope.dt = $filter('date')($scope.dt, 'dd.mm.yyyy'); };

Angular bootstrap datepicker和手动日期输入

3 个答案: