96

次のように定義された入力があります

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

ページの他の場所に表示されるように調整されています。

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

ページが読み込まれると、生年月日は のように適切にフォーマットされますDec 22, 2009。ただし、私の内部を見ると、JSがオブジェクトを文字列としてレンダリングする方法を推測<input>しているように見えます。Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)Date

<input>まず、Angularに日付を次のように表示するように指示するにはどうすればよい12/22/2009ですか? 属性|filters内で適用できないようです。ng-model

第二に、日付を編集するとすぐに、元の形式のままにしても、他のテキスト ( 内) はフィルター<td>を適用していないようです。|date入力テキストボックスのフォーマットと一致するようにフォーマットが突然変更されます。|dateモデルが変更されるたびにフィルターを適用するにはどうすればよいですか?

関連する質問:

4

9 に答える 9

72

フォームのカスタム検証を使用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() : "";
            });
        }
    };
});
于 2013-01-23T09:02:47.487 に答える
38

これは非常に便利なディレクティブangular-datetimeです。次のように使用できます。

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

また、入力にマスクを追加し、検証を実行します。

于 2015-04-15T10:01:07.000 に答える
8

input[type="date"]標準フォーム要素が AngularJS ~1.2.16 で正しく動作するようにするための簡単なディレクティブを作成しました。

ここを見てください: https://github.com/betsol/angular-input-date

そして、ここにデモがあります： http://jsfiddle.net/F2LcY/1/

于 2014-04-19T19:00:26.247 に答える
7

datepicker をクラスとして使用したので、Jquery datepicker などを使用していると思います。

moment.js をまったく使用せずに、純粋に datepicker と angularjs ディレクティブのみを使用して、意図したことを実行する方法があります。

ここでこのフィドルで例を挙げました

ここのフィドルからの抜粋：

  1. Datepicker の形式は異なり、angularjs 形式も異なります。適切な一致を見つけて、日付がコントロールで事前に選択され、ng-model がバインドされている間に入力フィールドにも入力されるようにする必要があります。'mediumDate'以下の形式は、AngularJS の形式と同等です。

    $(element).find(".datepicker")
          .datepicker({
             dateFormat: 'M d, yy'
          });

  2. 日付入力ディレクティブには、人間が読める形式の日付を表す中間文字列変数が必要です。

  3. ページのさまざまなセクションでの更新は、 や などのイベントを介して行う必要が$broadcastあり$onます。

  4. フィルターを使用して人間が読める形式で日付を表すことは ng-model でも可能ですが、一時的なモデル変数を使用します。

    $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
于 2013-09-12T19:20:21.957 に答える
2

私は、サーバーが日付を変更せずに返すようにし、javascript にビュー マッサージを行わせることを好みます。私の API は、SQL Server から "MM/DD/YYYY hh:mm:ss" を返します。

リソース

angular.module('myApp').factory('myResource',
    function($resource) {
        return $resource('api/myRestEndpoint/', null,
        {
            'GET': { method: 'GET' },
            'QUERY': { method: 'GET', isArray: true },
            'POST': { method: 'POST' },
            'PUT': { method: 'PUT' },
            'DELETE': { method: 'DELETE' }
        });
    }
);

コントローラ

var getHttpJson = function () {
    return myResource.GET().$promise.then(
        function (response) {

            if (response.myDateExample) {
                response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy');
            };

            $scope.myModel= response;
        },
        function (response) {
            console.log(response.data);
        }
    );
};

myDate 検証ディレクティブ

angular.module('myApp').directive('myDate',
    function($window) {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {

                var moment = $window.moment;

                var acceptableFormats = ['M/D/YYYY', 'M-D-YYYY'];

                function isDate(value) {

                    var m = moment(value, acceptableFormats, true);

                    var isValid = m.isValid();

                    //console.log(value);
                    //console.log(isValid);

                    return isValid;

                };

                ngModel.$parsers.push(function(value) {

                    if (!value || value.length === 0) {
                         return value;
                    };

                    if (isDate(value)) {
                        ngModel.$setValidity('myDate', true);
                    } else {
                        ngModel.$setValidity('myDate', false);
                    }

                    return value;

                });

            }
        }
    }
);

HTML

<div class="form-group">
    <label for="myDateExample">My Date Example</label>
    <input id="myDateExample"
           name="myDateExample"
           class="form-control"
           required=""
           my-date
           maxlength="50"
           ng-model="myModel.myDateExample"
           type="text" />
    <div ng-messages="myForm.myDateExample.$error" ng-if="myForm.$submitted || myForm.myDateExample.$touched" class="errors">
        <div ng-messages-include="template/validation/messages.html"></div>
    </div>
</div>

テンプレート/検証/messages.html

<div ng-message="required">Required Field</div>
<div ng-message="number">Must be a number</div>
<div ng-message="email">Must be a valid email address</div>
<div ng-message="minlength">The data entered is too short</div>
<div ng-message="maxlength">The data entered is too long</div>
<div ng-message="myDate">Must be a valid date</div>
于 2015-06-30T16:39:28.647 に答える