javascript - क्षणिकाओं के साथ कोणीय सामग्री में md-datepicker का प्रारूप बदलें




angularjs localization (9)

कोणीय सामग्री ने here पाया गया एक नई तारीख पिकर घटक पेश किया।

मैं चाहता हूं कि इस घटक द्वारा दी गई तारीख yyy-mm-dd प्रारूप में हो, लेकिन मुझे यकीन नहीं है कि यह कैसे किया जाता है। खोज करने से मैंने पाया कि $mdDateLocaleProvider का उपयोग किया जा सकता है, लेकिन मुझे इसका उपयोग करने का उदाहरण नहीं मिला।

क्या कोई मुझे md-datepicker द्वारा दी गई तारीख को प्रारूपित करने का एक कार्यशील उदाहरण दिखा सकता है?


- जब हम md-DatePicker का md-dialog में उपयोग करते हैं तो $ mdDateLocaleProvider सेवा उस तारीख को प्रारूपित नहीं करती है जैसा हमें चाहिए। हमें md-DatePicker की तारीख को प्रारूपित करने के लिए md-dialog के नियंत्रक में $ mdDateLocale का उपयोग करना होगा। उदाहरण के लिए -

angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) {

  $mdDateLocale.formatDate = function(date) {
    return moment(date).format('YYYY-MM-DD');
  };

  $scope.myDate = new Date('2015-10-15');

  $scope.minDate = new Date();

  $scope.maxDate = new Date();
});

Moment.js का उपयोग नहीं करने वालों के लिए, आप एक स्ट्रिंग के रूप में प्रारूपित कर सकते हैं:

.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {

    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();

    return day + '/' + (monthIndex + 1) + '/' + year;

  };
});

कोणीय सामग्री डॉक्स में $mdDateLocaleProvider लिए एक दस्तावेज है।

angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});

यदि आप moment.js का उपयोग नहीं करते हैं, तो दिनांक को प्रारूपित करने के लिए जो भी आप उपयोग करना चाहते हैं, formatDate लिए कोड को प्रारूप के अंदर formatDate

Here कोणीय सामग्री डॉक्स के नमूनों के आधार पर एक कोड उदाहरण दिया गया है।


पूरी तरह से काम किया है जब तारीख कोबोरार्ड से टाइप किया जाता है और md-datapicker निर्देश में मालिश 'अमान्य दिनांक' से बचने के लिए दीक्षा में वापस आ जाता है:

$mdDateLocaleProvider.formatDate = function(date) {
  return date ? moment(date).format('DD/MM/YYYY') : null;
};

$mdDateLocaleProvider.parseDate = function(dateString) {
  var m = moment(dateString, 'DD/MM/YYYY', true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};

मेरे मामले में मैं PlaceHolder को खो रहा था हर काम करता है, लेकिन जब मैं कस्टम स्वरूपण का उपयोग करता हूँ तो वह PlaceHolder गायब हो रहा था। नीचे की पंक्तियों ने प्लेसहोल्डर के साथ मेरी समस्या को हल किया।

$mdDateLocaleProvider.formatDate = function (date) {
                if(date==null)
                return "";
                var m = moment(date);
                return m.isValid() ? m.format('L') : '';
            };

मैं अपना समाधान प्रदान करना चाहता हूं जो क्रिस्टियान वेस्टरबीक के पद से 100% आधारित है। मुझे वास्तव में पसंद है कि उसने क्या किया, लेकिन मैं व्यक्तिगत रूप से कुछ अधिक सरल चाहता था।

appConfig.js

// config params in global scope that need to be set outside of Angular (due to Angular limitiations)
var appConfig = {
    // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish)
    date: {
        // default mask
        format: "MM/dd/yyyy",

        // md-datepicker display format
        mdFormatDate: function (date) {
            if (date && date instanceof Date) {
                return date.format(appConfig.date.format);

            } else {
                return null;

            }

        }

    }

};

app.material.config.js

// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
    // this is a global object set inside appConfig.js
    $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;

}]);

कुछ सेवा फ़ाइल जो स्थानीयकरण / अनुवाद / आदि से संबंधित है

// inside the service where you'd track the language/locale change
service._updateConfigDateFormat = function (theNewDateFormat) {
    // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever
    daepConfig.date.format = theNewDateFormat;

};

यह ध्यान दिया जाना चाहिए कि यह समाधान आपके md-datepicker के प्रदर्शन मूल्यों को फिर से प्रारूपित नहीं करेगा। यह केवल तभी काम करेगा जब मॉडल मान बदलता है।


यदि आप कोणीय- material.js के नवीनतम संस्करण का उपयोग कर रहे हैं तो $ mdDateLocale सेवा का उपयोग करें। यह कोड सैंपल पल.फिल्टर के उपयोग के लिए विकल्प के रूप में कोणीय फिल्टर में निर्मित कोणीय का उपयोग करता है। इस लिंक https://docs.angularjs.org/api/ng/filter/date पर यहां कोणीय की $ फ़िल्टर सेवा का उपयोग करके अन्य दिनांक प्रारूप विकल्प https://docs.angularjs.org/api/ng/filter/date

// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope) {

  // FORMAT THE DATE FOR THE DATEPICKER
  $mdDateLocale.formatDate = function(date) {
        return $filter('date')($scope.myDate, "mediumDate");
  };

});

रनटाइम के दौरान दिनांक प्रारूप, महीने के नाम और सप्ताह के नाम बदलना पूरी तरह से AngularJS 1.5.9 और क्षण 2.17.1 के साथ संभव है।

पहले प्रारंभिक भाषा को कॉन्फ़िगर करें। (इस उदाहरण में कोणीय-अनुवाद / $ TranslProvider का विन्यास वैकल्पिक है।)

angular.module('app').config(configureLocalization)

configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config'];
function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) {
  // Configure angular-translate
  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/',
      suffix: '.json'
  });
  // get the language from local storage using a helper 
  var language = localdb.get('language');
  if (!language || language === 'undefined') {
    localdb.set('language', (language = __config.app.defaultLanguage));
  }
  // Set the preferredLanguage in angular-translate
  $translateProvider.preferredLanguage(language);

  // Change moment's locale so the 'L'-format is adjusted.
  // For example the 'L'-format is DD.MM.YYYY for German
  moment.locale(language);

  // Set month and week names for the general $mdDateLocale service
  var localeData = moment.localeData();
  $mdDateLocaleProvider.months      = localeData._months;
  $mdDateLocaleProvider.shortMonths = moment.monthsShort();
  $mdDateLocaleProvider.days        = localeData._weekdays;
  $mdDateLocaleProvider.shortDays   = localeData._weekdaysMin;
  // Optionaly let the week start on the day as defined by moment's locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;

  // Format and parse dates based on moment's 'L'-format
  // 'L'-format may later be changed
  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };

  $mdDateLocaleProvider.formatDate = function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('L') : '';
  };
}

बाद में आपके पास कुछ बेस कंट्रोलर हो सकते हैं जो एक लैंग्वेज वैरिएबल देखते हैं जो यूजर द्वारा किसी अन्य भाषा को चुनने पर बदल जाता है।

angular.module('app').controller('BaseCtrl', Base);

Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale'];
function Base($scope, $translate, localdb, $mdDateLocale) {

  var vm = this;
  vm.language = $translate.use();

  $scope.$watch('BaseCtrl.language', function(newValue, oldValue) {
    // Set the new language in local storage
    localdb.set('language', newValue);
    $translate.use(newValue);

    // Change moment's locale so the 'L'-format is adjusted.
    // For example the 'L'-format is DD-MM-YYYY for Dutch
    moment.locale(newValue);

    // Set month and week names for the general $mdDateLocale service
    var localeDate = moment.localeData();
    $mdDateLocale.months      = localeDate._months;
    $mdDateLocale.shortMonths = moment.monthsShort();
    $mdDateLocale.days        = localeDate._weekdays;
    $mdDateLocale.shortDays   = localeDate._weekdaysMin;
    // Optionaly let the week start on the day as defined by moment's locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

ध्यान दें कि हमें $mdDateLocale.formatDate और $mdDateLocale.parseDate विधियों को बदलने की आवश्यकता नहीं है क्योंकि वे पहले से ही ' moment.locale(newValue) प्रारूप का उपयोग करने के लिए कॉन्फ़िगर किए गए हैं जो moment.locale(newValue) कॉल करके परिवर्तित किया जाता है।

अधिक स्थानीय अनुकूलन के लिए $ mdDateLocaleProvider के दस्तावेज़ देखें: https://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider

बोनस: यह भाषा चयनकर्ता की तरह लग सकता है:

<md-select ng-model="BaseCtrl.language" class="md-no-underline">
  <md-option
    ng-repeat="language in ['en', 'de', 'fr', 'nl']"
    ng-value ="language"
  ><span
    class    ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}"
  ></span>
  </md-option>
</md-select>

moment.js बजाय $filter का उपयोग करना। moment.js और मेरे लिए @Ian Poston Framer और @java देव की प्रतिक्रियाओं के संदर्भ में, अंत में मेरे लिए काम किया:

angular
    .module('App', ['ngMaterial'])
    .run(function($mdDateLocale, $filter) {
        $mdDateLocale.formatDate = function(date) {
            return $filter('date')(date, "dd-MM-yyyy");
        };
    })

मैं $filter को .config में इंजेक्ट नहीं कर सका क्योंकि यह एक प्रदाता नहीं है, इसलिए मुझे इसे अंदर करना पड़ा। $mdDateLocale साथ।





momentjs