2

我正在使用 angularjs、angular bootstap（这个）和他们的 datepicker 来输入日期。

<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-model 变成了来自 Date 对象的字符串，并且 datepicker 没有捕获新的日期。您可以尝试在 angular bootstap 页面上执行此操作（使用 firefox）。

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

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

4

3 回答 3

2

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

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>
于 2014-01-30T13:01:40.443 回答
2

据我所知，这种行为在社会上是众所周知的。

wemove可能在此站点上描述了一个可能的解决方案/解决方法，虽然没有尝试过，但看起来很有希望。

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

我在这里做了一个 plnkr ，它很丑但它可以工作，即你可以使用 datepicker 或手动输入值。

塞布

于 2013-11-21T17:03:55.133 回答
1

最简单的方法：

  1. 在输入标签中添加 ng-change="onChange()"

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

  2. 实现 onChange() 方法：

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

于 2015-11-27T11:49:47.560 回答