এনজি-মডেল ব্যবহার করে কোনও তারিখ কীভাবে ফর্ম্যাট করবেন?

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"]অ্যাঙ্গুলারজেএস ~ 1.2.16 এর সাথে স্ট্যান্ডার্ড ফর্ম উপাদানগুলিকে সঠিকভাবে কাজ করতে সক্ষম করার জন্য একটি সহজ নির্দেশিকা তৈরি করেছি created

এখানে দেখুন: https://github.com/betsol/angular-input-date

এবং এখানে ডেমো রয়েছে: http://jsfiddle.net/F2LcY/1/

Question 5

আমি তারিখ নির্বাচন করতে jquery ডেটপিকার ব্যবহার করছি। আমার নির্দেশিকা পড়ার তারিখ এবং ফর্ম্যাট করা তারিখ ng-modelপ্রদর্শন করার সময় এটি জসন ডেট ফর্ম্যাটে (মিলি সেকেন্ডে) স্টোরে রূপান্তরিত করে and

এইচটিএমএল কোড:

<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

যেহেতু আপনি ডেটপিকারকে ক্লাস হিসাবে ব্যবহার করেছেন আমি ধরে নিচ্ছি আপনি কোনও জ্যাকুরি ডেটপিকার বা অন্য কিছু অনুরূপ ব্যবহার করছেন।

মুহুর্ত.জগুলি মোটেও ব্যবহার না করে আপনি যা চান তা করার একটি উপায় রয়েছে, খালি খালি ডেটপিকার এবং কৌণিক নির্দেশাবলী ব্যবহার করে।

আমি এই ফিডল এ এখানে একটি উদাহরণ দিয়েছি

এখানে ঝাঁকুনির অংশগুলি:

ডেটপিকারের একটি আলাদা ফর্ম্যাট থাকে এবং কৌণিক প্রকারের ফর্ম্যাটটি আলাদা, উপযুক্ত ম্যাচটি খুঁজে নেওয়া দরকার যাতে তারিখটি নিয়ন্ত্রণে পূর্বনির্ধারিত হয় এবং এনজি-মডেল সীমাবদ্ধ থাকাকালীন ইনপুট ক্ষেত্রেও পপুলিটেড থাকে। নীচের বিন্যাসটি 'mediumDate'AngularJS এর বিন্যাসের সমতুল্য ।
```
$(element).find(".datepicker")
          .datepicker({
             dateFormat: 'M d, yy'
          }); 
```
তারিখের মানব পাঠযোগ্য ফর্ম উপস্থাপনের জন্য তারিখ ইনপুট নির্দেশের অন্তর্বর্তী স্ট্রিং ভেরিয়েবল থাকা দরকার।
পৃষ্ঠার বিভিন্ন বিভাগে রিফ্রেশ হওয়া ইভেন্টগুলির মতো, $broadcastএবং এর মাধ্যমে ঘটতে হবে $on।
মানব পাঠযোগ্য আকারে তারিখের প্রতিনিধিত্ব করতে ফিল্টার ব্যবহার করা এনজি-মডেলেও সম্ভব তবে অস্থায়ী মডেলের পরিবর্তনশীল সহ with
```
$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

আগ্রহী প্রত্যেকের জন্য কৌণিক 2 + এ:

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

ডেট পাইপ কৌণিক মধ্যে ফিল্টার ধরণের ।

Question 9

আমি সার্ভারটি পরিবর্তন না করেই তারিখটি ফেরত দেওয়া পছন্দ করি এবং জাভাস্ক্রিপ্টটি দেখে ম্যাসেজ করা। আমার এপিআই এসকিউএল সার্ভার থেকে "এমএম / ডিডি / ওয়াইওয়াই এইচ: মিমি: এসএস" প্রদান করে।

রিসোর্স

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

মাইডেট বৈধকরণের নির্দেশিকা

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>

টেমপ্লেট / বৈধতা / ম্যাসেজ। 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">

নিয়ামক আপনি তারিখ ফিল্টার হিসাবে তারিখটি প্রদর্শন করতে চান যে বিন্যাস নির্দিষ্ট করতে পারেন

$ স্কোপ.ফর্ম্যাটস = ['ডিডি-এমএমএমএম-ইয়াই', 'ইয়াই / এমএম / ডিডি', 'ডিডি.এম.এম.ইউইআই', 'শর্ট ডেট'];