एनजी-मॉडल का उपयोग करके दिनांक कैसे प्रारूपित करें?

Question 1

मेरे पास इनपुट के रूप में परिभाषित है

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

जिसे पृष्ठ पर कहीं और प्रदर्शित किया जाना है:

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

जब पृष्ठ लोड होता है तो जन्म तिथि कुछ इस तरह होती है Dec 22, 2009। हालाँकि, जब मैं अपने अंदर झाँकता हूँ तो <input>यह दिखाया जाता है Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)जिसके अनुसार मुझे लगता है कि जे एस कैसे Dateवस्तुओं को तार के रूप में प्रस्तुत करता है ।

सबसे पहले, मैं कैसे बताऊं कि एंगुलर ने तारीख <input>को कुछ इस तरह दिखाया है 12/22/2009? मैं विशेषता के |filtersअंदर आवेदन नहीं कर सकता ng-model।

दूसरे, जैसे ही मैं संपादित तारीख, यहां तक कि यह मूल प्रारूप में रखते हुए, मेरे दूसरे पाठ (अंदर के रूप में <td>) लागू करने के लिए नहीं लगता है |dateअब और फिल्टर; यह इनपुट टेक्स्टबॉक्स से मेल खाने के लिए अचानक प्रारूप बदलता है। |dateहर बार मॉडल को बदलने के लिए मुझे फ़िल्टर कैसे लागू करना है ?

संबंधित सवाल:

Question 2

Http://docs.angularjs.org/guide/forms डेमो के कस्टम सत्यापन का उपयोग करें : http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

प्रारूपकों और पार्सर्स और मोमेंटजेएस का उपयोग करते हुए निर्देश )

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

Question 3

यहाँ बहुत आसान निर्देशकीय कोणीय-डेटाइम है । आप इसे इस तरह से उपयोग कर सकते हैं:

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

यह आपके इनपुट में मुखौटा भी जोड़ता है और सत्यापन करता है।

Question 4

मैंने input[type="date"]AngularJS ~ 1.2.16 के साथ सही रूप से काम करने के लिए मानक फ़ॉर्म तत्वों को सक्षम करने के लिए एक सरल निर्देश बनाया है ।

यहां देखें: https://github.com/betsol/angular-input-date

और यहाँ का डेमो है: http://jsfiddle.net/F2LcY/1/

Question 5

मैं तिथि का चयन करने के लिए jquery datepicker का उपयोग कर रहा हूं। मेरा निर्देशन पढ़ने की तारीख और इसे ng-modelडेटा स्वरूपित करने के लिए जोंस डेट फॉर्मेट (मिलीसेकंड में) स्टोर करें, जबकि फॉर्मेट की गई तारीख को प्रदर्शित करें। और रिवर्स करें अगर एनजी-मॉडल के पास जोंस डेट (मिलीसेकंड में) हो तो फॉर्मेट में मेरा फॉर्मेट डिस्प्ले ज्यूरी डेटपिकर के रूप में प्रदर्शित होता है।

HTML कोड:

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

कोणीय निर्देश:

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

        }
    };
});

Question 6

चूँकि आपने एक वर्ग के रूप में डेटापिक का उपयोग किया है, इसलिए मैं मान रहा हूँ कि आप एक जेकरी डेटकपर या कुछ इसी तरह का उपयोग कर रहे हैं।

ऐसा करने का एक तरीका है जो आप पल-पल का उपयोग किए बिना कर रहे हैं।

मैंने इस Fiddle में एक उदाहरण दिया है

यहाँ की बेला से कुछ अंश:

डेटपिकर का एक अलग प्रारूप होता है और कोणीयज प्रारूप अलग होता है, उपयुक्त मिलान खोजने की आवश्यकता होती है ताकि तारीख नियंत्रण में छंटनी हो और इनपुट क्षेत्र में भी आबाद हो, जबकि एनजी-मॉडल बाध्य है। नीचे प्रारूप 'mediumDate'AngularJS के प्रारूप के बराबर है ।
```
$(element).find(".datepicker")
          .datepicker({
             dateFormat: 'M d, yy'
          }); 
```
तिथि इनपुट निर्देश को तारीख के मानव पठनीय रूप का प्रतिनिधित्व करने के लिए एक अंतरिम स्ट्रिंग चर होना चाहिए।
पृष्ठ के विभिन्न वर्गों में ताज़ा करना घटनाओं, जैसे $broadcastऔर के माध्यम से होना चाहिए $on।
मानव पठनीय रूप में दिनांक का प्रतिनिधित्व करने के लिए फ़िल्टर का उपयोग करना एनजी-मॉडल के साथ-साथ एक अस्थायी मॉडल चर के साथ संभव है।
```
$scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
```

Question 7

मैं निम्नलिखित निर्देश का उपयोग करता हूं जो मुझे और अधिकांश उपयोगकर्ताओं को बहुत खुश करता है! यह पार्सिंग और स्वरूपण के लिए क्षण का उपयोग करता है। यह सनीशाह द्वारा पहले जैसा उल्लेख किया गया है, थोड़ा सा दिखता है।

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

मेरे रूप में मैं इसे इस तरह उपयोग करता हूं:

<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>

यह एक टाइमस्टैम्प (1970 से मिलीसेकंड) को बांध देगा doc.beginऔर doc.end।

Question 8

Angular2 + में रुचि रखने वाले किसी के लिए:

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

DatePipe कोणीय में फिल्टर के प्रकार के साथ ।

Question 9

मुझे लगता है कि सर्वर ने संशोधन के बिना तारीख वापस कर दी है, और जावास्क्रिप्ट को दृश्य मालिश करना है। मेरा API SQL सर्वर से "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;

                });

            }
        }
    }
);

एचटीएमएल

<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>

Question 10

Angularjs ui बूटस्ट्रैप आप angularjs ui बूटस्ट्रैप का उपयोग कर सकते हैं, यह तारीख सत्यापन भी प्रदान करता है

<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">

कंट्रोलर में निर्दिष्ट कर सकते हैं कि आप जो भी फॉर्मेट डेटफिल्टर

$ स्कोप के रूप में प्रदर्शित करना चाहते हैं ।