angularjs - एनजी-मॉडल स्ट्रिंग को तिथि के लिए कोण सामग्री डेटकॉकर के लिए कैसे प्रारूपित करना है




date mongoose (4)

आप ng-init, एक कस्टम फिल्टर, और एनजी-परिवर्तन का उपयोग कर सकते हैं और इसे मार्कअप में पूरा कर सकते हैं।

जावास्क्रिप्ट:

app.filter('toDate', function() {
    return function(input) {
        return new Date(input);
    }
})

HTML:

<md-datepicker
     ng-init="date = (license.expirationdate | toDate)"
     ng-model="date"
     ng-change="license.expirationdate = date.toISOString()"
     md-placeholder="Enter date">
</md-datepicker>

इस दृष्टिकोण के साथ, आपको दृश्य नियंत्रक के साथ अपने नियंत्रक कोड को अव्यवस्थित करने की आवश्यकता नहीं है। इस दोष यह है कि नियंत्रक में लाइसेंस के लिए कोई भी प्रोग्रामेटिक परिवर्तन। एक्सप्रेशन डिटेक्ट इन पर स्वचालित रूप से दृश्य में दिखाई नहीं देगा।

मेरे पास संग्रह में तिथि ऑब्जेक्ट वाले डेटाबेस के लिए एक मोंगोज़ कनेक्शन है। मैं इन तारीख वस्तुओं को कोणीय सामग्री की DatePicker नियंत्रण का उपयोग करना चाहता हूं। दिनांक ऑब्जेक्ट आईएसओ स्ट्रिंग प्रारूप का पालन करें।

यहां एक कोड स्निपेट है:

<md-datepicker 
     ng-model="license.expirationdate" md-placeholder="Enter date">
</md-datepicker>    

मुझे निम्नलिखित त्रुटि मिलती है:

md-datepicker लिए ng-model एक तिथि उदाहरण होना चाहिए।

शोध करते समय, मुझे पता चला कि आप एक तिथि उदाहरण बनाने के लिए फ़िल्टर का उपयोग कर सकते हैं, लेकिन यह मेरे लिए काम नहीं करता -> मुझे एक त्रुटि संदेश मिला है कि मॉडल का मान असाइन करने योग्य है, जब साधारण फिल्टर का उपयोग करते समय फिल्टर ने स्ट्रिंग इनपुट के आधार पर केवल एक नया दिनांक ऑब्जेक्ट लौटाया।

ng-model परिवर्तनों के लिए अनुमति देने के समय मैं तारों को तिथि ऑब्जेक्ट में कैसे प्रारूपित कर सकता हूं?

संपादित करें: मोंगोज़ स्कीमा के लिए स्कीमा = मोंगोस। सेमा;

var Schema = mongoose.Schema;

var modelschema = new Schema({
    name : String,
    licensetype : String,
    activationcount : Number,
    expirationdate: Date,
    key : String
})

यहां एक्सप्रेस रूटिंग है जो स्कीमा को पॉप्युलेट करता है

app.post('/licenses', function (req, res) {

    console.log(req.body.expirationDate);
    License.create({

        name: req.body.licenseName,
        licensetype: req.body.licenseType,
        activationcount: 0,
        expirationdate: req.body.expirationDate,
        key: "123456"
    }, function (err, license) {

        if (err) {
            res.send(err);
            console.log(err);
        }

        //Send user back to main page
        res.writeHead(301, {
            'Location': '/',
            'Content-Type': 'text/plain'
        });
        res.end();
    }
    )

});

मुझे वर्तमान दिन से 6 महीने की एक डिफ़ॉल्ट तारीख बनाना पड़ा ...

आईएसओ प्रारूप और वापस करने के लिए तिथि रूपांतरण के साथ काफी लंबा प्रयोग करने के बाद, मैंने एक सरल समाधान बनाया जो मुझे यहां नहीं मिला।

सामान्य विचार: आज समय लें और आवश्यक तिथि तक मिलीसेकेंड में समय घटाएं / घटाएं।

एचटीएमएल:

<div flex-gt-xs>
   <h4 class="md-title">Date From:</h4>
      <md-datepicker ng-model="vm.sixMonthBeforeNow" md-placeholder="Date From:"></md-datepicker>
      {{vm.sixMonthBeforeNow}}
</div>

नियंत्रक:

vm.sixMonthBeforeNow = new Date((+new Date) - 15778800000); // today - 6 month in ISO format (native for Angular Material Datepicker)

परिणाम:

शायद यह किसी के लिए उपयोगी होगा ...


मैंने मेरे लिए यह संभाल करने के लिए एक कस्टम निर्देश बनाया है मैंने इसे Sugarjs.com से दिनांक कक्षा का उपयोग करने के लिए इस्तेमाल किया है क्योंकि मैंने इसे कार्यान्वित किया है। यह विधि सुनिश्चित करता है कि तिथि हमेशा एक तारीख की तरह प्रदर्शित होती है और यूटीसी ऑफ़सेट के साथ चारों ओर कूद नहीं जाती है। यदि आप यूटीसी तक सीमित नहीं करना चाहते हैं, तो आप फ़ॉर्मेट को return new Date(input) करने के लिए बदल सकते हैं।

angular.module 'app.components'
 .directive 'autoChangeStringDates', ->
   directive =
     restrict: 'A'
     require: 'ngModel'
     priority: 2000
     link: (scope, el, attrs, ngModelController) ->
       ngModelController.$formatters.push((input) ->
         if typeof input == Date
          return input
         else
           return Date.create(input, {fromUTC: true})
       )
    return

फिर आप इसे अपने एचटीएमएल मार्कअप में इसका इस्तेमाल करते हैं

<md-datepicker ng-model='myModel' auto-change-string-dates></md-datepicker>

यहाँ एक उदाहरण है:

मार्कअप:

<div ng-controller="MyCtrl">
    <md-datepicker ng-model="dt" md-placeholder="Enter date" ng-change="license.expirationdate = dt.toISOString()">
    </md-datepicker>
    {{license.expirationdate}}
</div>

जावास्क्रिप्ट:

app.controller('MyCtrl', function($scope) {

    $scope.license = {
        expirationdate: '2015-12-15T23:00:00.000Z'
    };

    $scope.dt = new Date($scope.license.expirationdate);

});

बेला: http://jsfiddle.net/masa671/jm6y12un/

अद्यतन करें:

ng-repeat :

मार्कअप:

<div ng-controller="MyCtrl">
    <div ng-repeat="d in data">
        <md-datepicker
            ng-model="dataMod[$index].dt"
            md-placeholder="Enter date"
            ng-change="d.license.expirationdate = dataMod[$index].dt.toISOString()">
        </md-datepicker>
        {{d.license.expirationdate}}
    </div>
</div>

जावास्क्रिप्ट:

app.controller('MyCtrl', function($scope) {
    var i;

    $scope.data = [ 
        { license:
            { expirationdate: '2015-12-15T23:00:00.000Z' }
        },
        { license:
            { expirationdate: '2015-12-20T23:00:00.000Z' }
        },
        { license:
            { expirationdate: '2015-12-25T23:00:00.000Z' }
        }
    ];

    $scope.dataMod = [];
    for (i = 0; i < $scope.data.length; i += 1) {
        $scope.dataMod.push({
            dt: new Date($scope.data[i].license.expirationdate)
        });
    }
});

बेला: http://jsfiddle.net/masa671/bmqpyu8g/





angular-material