Ng modeli kullanarak bir tarih nasıl biçimlendirilir?

Olarak tanımlanmış bir girdim var

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

Sayfanın başka bir yerinde görüntülenecek şekilde düzenlenmiş:

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

Sayfa yüklendiğinde, doğum tarihi güzel bir şekilde biçimlendirilir Dec 22, 2009. Yaşıyorum benim içine bakmak Ancak, <input>o kadar gösterilene Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)hangi sanırım JS nasıl oluşturduğunu olduğu Datedizeleri olarak nesneleri.

İlk olarak, Angular'a tarihin içindeki <input>gibi bir şey göstermesini nasıl söylerim 12/22/2009? Özelliğin |filtersiçine uygulayamıyorum ng-model.

İkinci olarak, tarihi düzenler değiştirmez, orijinal biçiminde tutsam bile, diğer metnim (içindeki <td>) |dateartık filtreyi uygulamıyor gibi görünüyor ; biçimleri giriş metin kutusununkiyle eşleşecek şekilde aniden değiştirir. |dateModel her değiştiğinde filtreyi nasıl uygulayabilirim ?

İlgili sorular:

• Direktifimi yalnızca değişimde ateşleme talimatımı nasıl alabilirim?
• Bir yönergedeki argümanlara nasıl erişilir?

Formların özel doğrulamasını kullanın http://docs.angularjs.org/guide/forms Demo: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Biçimlendiriciler ve ayrıştırıcılar ve MomentJS kullanan yönerge )

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() : "";
            });
        }
    };
});

İşte çok kullanışlı açısal-tarih-saat yönergesi . Bunu şu şekilde kullanabilirsiniz:

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

Ayrıca girişinize maske ekler ve doğrulama gerçekleştirir.

Standart input[type="date"]form öğelerinin AngularJS ~ 1.2.16 ile düzgün çalışmasını sağlamak için basit bir yönerge oluşturdum .

Buraya bakın: https://github.com/betsol/angular-input-date

Ve işte demo: http://jsfiddle.net/F2LcY/1/

Tarih seçmek için jquery datepicker kullanıyorum. ng-modelYönergem tarihi okudu ve onu json tarih biçimine (milisaniye cinsinden) dönüştürürken, biçimlendirilmiş tarihi görüntülerken verileri depolar. Ve ng-modelinde json tarihi varsa (milisaniye cinsinden) biçimlendiricim jquery veri seçici olarak biçimimde görüntülenir.

HTML Kodu:

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

Açısal Yönerge:

myModule.directive('jqdatepicker', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());            
                    scope.$apply();
                }
            });
            ngModelCtrl.$formatters.unshift(function(v) {
            return $filter('date')(v,'dd/MM/yyyy'); 
            });

        }
    };
});

Sınıf olarak datepicker'ı kullandığınızdan beri, bir Jquery datepicker veya benzeri bir şey kullandığınızı varsayıyorum.

Moment.js kullanmadan, sadece datepicker ve angularjs direktiflerini kullanarak amaçladığınız şeyi yapmanın bir yolu var.

Bu Fiddle'da bir örnek verdim

Kemancadan alıntılar burada:

1. Datepicker'ın farklı bir formatı vardır ve angularjs formatı farklıdır, uygun eşleşmeyi bulması gerekir, böylece kontrolde tarih önceden seçilir ve ayrıca ng modeli bağlıyken giriş alanına da doldurulur. Aşağıdaki biçim, 'mediumDate'AngularJS biçimine eşdeğerdir .

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

2. Tarih girdisi yönergesinin, tarihin insan tarafından okunabilir biçimini temsil etmesi için bir ara dizge değişkenine sahip olması gerekir.

3. Sayfanın farklı bölümlerinde yenileme, $broadcastve gibi etkinlikler aracılığıyla gerçekleşmelidir $on.

4. Tarihi insan tarafından okunabilir biçimde göstermek için filtre kullanmak, ng modelinde de mümkündür, ancak geçici bir model değişkeni ile.

   $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
   

Beni ve çoğu kullanıcıyı çok mutlu eden aşağıdaki yönergeyi kullanıyorum! Ayrıştırma ve biçimlendirme için moment kullanır. Daha önce bahsedilen SunnyShah'ınkine biraz benziyor.

angular.module('app.directives')

.directive('appDatetime', function ($window) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var moment = $window.moment;

            ngModel.$formatters.push(formatter);
            ngModel.$parsers.push(parser);

            element.on('change', function (e) {
                var element = e.target;
                element.value = formatter(ngModel.$modelValue);
            });

            function parser(value) {
                var m = moment(value);
                var valid = m.isValid();
                ngModel.$setValidity('datetime', valid);
                if (valid) return m.valueOf();
                else return value;
            }

            function formatter(value) {
                var m = moment(value);
                var valid = m.isValid();
                if (valid) return m.format("LLLL");
                else return value;

            }

        } //link
    };

}); //appDatetime

Formumda şu şekilde kullanıyorum:

<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label>
<label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>

Bu, bir zaman damgasını (1970'ten beri geçen milisaniye) doc.beginve öğelerine bağlayacaktır doc.end.

Angular2 + 'da ilgilenen herkes için:

<input type="text" placeholder="My Date" [ngModel]="myDate | date: 'longDate'">

DatePipe Angular'daki filtre türleri ile .

Sunucunun tarihi değiştirmeden döndürmesini ve görünüm masajını javascript'in yapmasını tercih ederim. API'm, SQL Server'dan "AA / GG / YYYY ss: dd: ss" döndürüyor.

Kaynak

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' }
        });
    }
);

Kontrolör

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 Doğrulama Yönergesi

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>

şablon / doğrulama / mesajlar.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>

Angularjs ui bootstrap angularjs ui bootstrap kullanabilirsiniz, ayrıca tarih doğrulama da sağlar

<input type="text"  class="form-control" 
datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
min-date="minDate" max-date="'2015-06-22'"  datepickeroptions="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"> 

denetleyicide tarihi tarih filtresi

$ kapsam.formats = ['gg-AAMM-yyyy', 'yyyy / AA / gg', 'gg.MM.yyyy', 'shortDate'] olarak görüntülemek istediğiniz formatı belirtebilirsiniz ;