2

angularjs、angular bootstap ( this one )、およびその日付ピッカーを使用して日付を入力しています。

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

日付ピッカーで選択した日付を手動で変更できるようにしたい。たとえば、datepicker で 07.09.2013 を選択し、それを 07.09.2012 に変更したいとします。これを行うには、入力をクリックし、バックスペースを押して最後の桁の 3 を削除し、そこに 2 を入力します。問題は、これを行うと、ng-model が Date オブジェクトからの文字列になり、datepicker が新しい日付をキャッチしないことです。これは、Angular ブートストラップ ページ (Firefox を使用) で試すことができます。

ユーザーが好きなテキストをそこに置くことができるブラウザを示す入力タイプのテキストと、これがどのように機能するかという ng-model ディレクティブのため、これは正常な動作であることを理解しています。しかし、この問題の回避策はありますか? ng-change または $watch を使用して ng-model を監視し、ここに記載されているライブラリを使用して Date オブジェクトに変換する必要があると考えました(日付形式がこの関数に対して有効でないため、Date.parse() を使用できません) ）。

私の質問は次のとおりです。この問題に対する別の解決策はありますか? 構成フラグまたは角度固有のものはありますか?

4

3 に答える 3

2

私の知る限り、この動作はコミュニティでよく知られています。

このサイトでwemoveが説明している解決策/回避策があるかもしれませんが、試したことはありませんが、有望に見えます。

もう1つの可能性は、基礎となるjquery datepickerを直接使用することです。これは（afaik）angularディレクティブによってラップされています。日付ピッカーと手動入力の両方を提供する必要があるため、これが私のプロジェクトで行う方法です。

ここにplnkr を作成しました。見苦しいですが、機能します。つまり、日付ピッカーを使用するか、値を手動で入力できます。

セブ

于 2013-11-21T17:03:55.133 に答える
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 に答える
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 に答える