javascript कोणीय सामग्री में एमडी-डेटपिकर का प्रारूप बदलें




angularjs localization (10)

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

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

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

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

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

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


उन लोगों के लिए जो 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 का उपयोग नहीं करते हैं, तो प्रारूप प्रारूप के अंदर कोड को प्रतिस्थापित करें जिसे आप दिनांक स्वरूपित करने के लिए उपयोग करना चाहते हैं।

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


कज़ुएर द्वारा बताई गई समस्या का समाधान करने के लिए:

दुर्भाग्य से यह काम नहीं करता है अगर तारीख कीबोर्ड से टाइप की गई है

आपको पार्सडेट विधि को भी परिभाषित करना चाहिए। दस्तावेज़ों से:

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

एक पूर्ण उदाहरण के लिए, मेरे पास मेरे ऐप में है (पल का उपयोग करके):

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

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

सादर


मुझे एक ही समस्या थी और moment.js की मदद से इस सरल समाधान के साथ moment.js । मैंने ng-change एट्रिब्यूट ng-change इस्तेमाल किया जो तिथि बदल जाने पर आग लगती है।

अपने एचटीएमएल के अंदर:

<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>

अपने नियंत्रक के अंदर:

$scope.dateChanged = function() {
    this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}

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

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

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

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

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 विधियों को बदलने की आवश्यकता नहीं है क्योंकि वे पहले से ही 'l'-format' का उपयोग करने के लिए कॉन्फ़िगर किए गए हैं जो 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>

मैं अपना समाधान प्रदान करना चाहता हूं जो क्रिस्टियान वेस्टरबेक की पोस्ट के आधार पर 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;

};

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


मैंने $mdDateLocaleProvider पर $mdDateLocaleProvider करने के लिए $mdDateLocaleProvider का उपयोग किया। यदि आप पिछली छोर पर भेजते समय दिनांक स्वरूपित करना चाहते हैं, तो निम्नलिखित मेरे लिए काम किया: -

$filter('date')(this.date, 'MM/dd/yyyy');

मेरे पास उपरोक्त नियंत्रक है।


यदि आप कोणीय-material.js के नवीनतम संस्करण का उपयोग कर रहे हैं तो $ mdDateLocale सेवा का उपयोग करें। यह कोड नमूना moment.js लाइब्रेरी का उपयोग करने के विकल्प के रूप में कोणीय के निर्मित दिनांक फ़िल्टर का उपयोग करता है। इस लिंक पर यहां कोणीय की $ फ़िल्टर सेवा का उपयोग करके अन्य दिनांक प्रारूप विकल्प देखें 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");
  };

});




angular-material