कोणीय 2 में DatePipe में लोकेल कैसे सेट करें?

Question

मैं यूरोपीय प्रारूप का उपयोग करके दिनांक प्रदर्शित करना चाहता हूं dd/MM/yyyyलेकिन DatePipe लघु प्रारूप का उपयोग करके यह केवल यूएस दिनांक शैली का उपयोग करके प्रदर्शित करता है MM/dd/yyyy।
मैं मान रहा हूं कि डिफ़ॉल्ट लोकेल en_US है। शायद मैं डॉक्स में गायब हूं, लेकिन मैं Angular2 ऐप में डिफ़ॉल्ट लोकेल सेटिंग्स को कैसे बदल सकता हूं? या हो सकता है कि DatePipe के लिए एक कस्टम प्रारूप पास करने का कोई तरीका हो?

Comments

मैं यह भी जानना चाहूंगा। मुझे दिनांक पाइप डॉक्स मिला है, जो y के m 'के क्रम की व्याख्या करता है और प्रारूप में स्ट्रिंग को अनदेखा किया जाता है क्योंकि ऑर्डर लोकेल द्वारा सेट किया गया है। लेकिन लोकेल कैसे सेट करें (या यहां तक ​​कि प्राप्त करें) का कोई संकेत नहीं।

— मार्क फार्मिलो

Answer 1

Angular2 RC6 के रूप में, आप एक प्रदाता को जोड़कर अपने ऐप मॉड्यूल में डिफ़ॉल्ट लोकेल सेट कर सकते हैं:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

मुद्रा / तिथि / संख्या पाइपों को स्थान लेना चाहिए। LOCALE_ID कोणीय / कोर से आयात किया जाने वाला एक OpaqueToken है ।

import { LOCALE_ID } from '@angular/core';

अधिक उन्नत उपयोग के मामले के लिए, आप किसी सेवा से स्थान लेना चाह सकते हैं। दिनांक पाइप का उपयोग कर घटक बनाए जाने पर स्थान (एक बार) हल हो जाएगा:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

आशा है कि यह आप के लिए काम करता है।

Comments

मुझे आश्चर्य है कि यह अभी भी कहीं भी प्रलेखित नहीं हुआ है। दिनांक पाइप पृष्ठ ( angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html ) पर नहीं, सामान्य पाइप पृष्ठ पर नहीं ( angular.io/docs/ts/yatest/guide/pipes .html ) और यह प्रश्न वास्तव में Google ( google.com/search?q=angular%202%20locales&rct=j ) पर पहला हिट है । शानदार खोज।

— जेपी टेन बर्ज

कोड में एक पाइप का उपयोग करने के लिए आपको अब इसे प्रारूपित करना होगा new CurrencyPipe('en-US');। उम्मीद है कि यह कुछ के लिए उपयोगी है क्योंकि यह पहली समस्या के रूप में दिखाई दी जब मेरे मुद्दे को गूग्लिंग।

— ऐश ब्लू

@ कोरोला क्या आप उस सेवा पर कुछ प्रकाश डाल सकते हैं? जब ऐप चल रहा है, तो मैं उस लोकेशन को बदलना चाहूंगा, क्या यह उस सेवा के साथ संभव है? और मैं इस तरह की सेवा को कैसे लागू करूंगा?

— Martijn van den Bergh

@MartijnvandenBergh, सेवा केवल लोकल स्ट्रिंग लौटाती है - कुछ भी नहीं फैंसी। हमारे पास मिश्रित परिणाम हैं जो ऐप चलने के दौरान लोकेल को बदलने की कोशिश कर रहे हैं। सभी मामलों को संभालने के लिए पुनः लोडिंग पृष्ठ को समाप्त किया। YMMV।

— कोरोला

मैं भी इस विषय के साथ एक बहुत संघर्ष करना पड़ा और मुझे आशा है कि लेख मैं इस बारे में लिखा था कुछ लोगों की मदद कर सकते हैं: medium.com/dailyjs/dynamic-locales-in-angular-dd9a527ebe1f

— माइकल करेन

Answer 2

यदि आप एक बार अपने ऐप के लिए भाषा सेट करना चाहते हैं तो LOCALE_ID के साथ समाधान बहुत अच्छा है। लेकिन यह काम नहीं करता है, यदि आप रनटाइम के दौरान भाषा बदलना चाहते हैं। इस मामले के लिए आप कस्टम डेट पाइप लागू कर सकते हैं।

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

अब यदि आप TranslateService का उपयोग करके ऐप डिस्प्ले भाषा बदलते हैं (देखें ngx-Translate )

this.translateService.use('en');

आपके ऐप में मौजूद फ़ॉर्मेट अपने आप अपडेट हो जाने चाहिए।

उपयोग का उदाहरण:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

या यहाँ मेरे सरल "नोट्स" प्रोजेक्ट की जाँच करें ।

Comments

मुझे टेम्पलेट पार्स त्रुटि मिल रही है; सुझाए गए तरीके से उपयोग किए गए फ़िल्टर 'localizedDate' को संकलित नहीं कर सकता।

— प्रसाद शिंदे

क्या आपने LocalizedDatePipe को सही ढंग से घोषित किया है? मेरे उदाहरण प्रोजेक्ट में pip.module.ts देखें ।

— मिलान ह्लैंक

हां, मैंने इसे पहले ही हल कर लिया है, @ मिलन ह्लिनक मुझे उस समय केवल अपनी टिप्पणी पर जवाब देना चाहिए था। लेकिन वैसे भी आपके शीघ्र प्रतिक्रिया के लिए धन्यवाद। तुम बहुत अच्छा कर रहे हो।

— प्रसाद शिंदे

यह स्पष्ट रूप से मैं क्या देख रहा था। यह शर्म की बात है कि एक कस्टम पाइप को रनटाइम पर सिर्फ लोकेल बदलने की आवश्यकता है ..

— dendimiiii

यह काम करता है लेकिन ध्यान दें कि "शुद्ध" पाइप "शुद्ध" की तुलना में धीमा है। जैसा कि कोणीय गाइड कहता है: कोणीय हर घटक परिवर्तन का पता लगाने के चक्र के दौरान एक अशुद्ध पाइप निष्पादित करता है। एक अशुद्ध पाइप को अक्सर कहा जाता है, जितनी बार हर कीस्ट्रोके या माउस-मूव। मन में उस चिंता के साथ, एक अशुद्ध पाइप को बहुत सावधानी से लागू करें। एक महंगा, लंबे समय तक चलने वाला पाइप उपयोगकर्ता के अनुभव को नष्ट कर सकता है।

— लुका रितोसा

Answer 3

angular5उपरोक्त उत्तर के साथ अब काम नहीं करता है!

निम्नलिखित कोड:

app.module.ts

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

निम्नलिखित त्रुटि की ओर जाता है:

त्रुटि: स्थानीय "डी-एट" के लिए स्थानीय डेटा गुम।

इसके साथ angular5आपको उपयोग की गई लोकेल फ़ाइल को अपने आप लोड और रजिस्टर करना होगा।

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

प्रलेखन

Comments

वास्तव में यदि आपको एन-यूएस को छोड़कर कुछ अन्य लोकेल का उपयोग करने की आवश्यकता है, तो आपको इसे पंजीकृत करना चाहिए। उत्तर के लिए धन्यवाद, @zgue

— मिकाकिन

ठीक है कि मुझे एक और सिरदर्द रोका गया .. Thx! डॉक्टर थोड़ा जटिल है, क्योंकि मैं registerLocaleDataकाफी था, अच्छी तरह से इसकी नहीं।

— खतरे '

Ionic 4 के लिए सर्वश्रेष्ठ उत्तर!

— पैरीसीमा

Answer 4

यदि आप से उपयोग करते TranslateServiceहैं @ngx-translate/core, तो नीचे एक नया पाइप बनाए बिना एक संस्करण है जो रनटाइम पर गतिशील रूप से स्विच करने के साथ काम करता है (कोणीय 7 पर परीक्षण किया गया)। DatePipe के localeपैरामीटर ( डॉक्स ) का उपयोग करना :

सबसे पहले, अपने एप्लिकेशन में आपके द्वारा उपयोग किए जाने वाले स्थानों को घोषित करें, जैसे app.component.ts:

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

फिर, अपने पाइप का गतिशील रूप से उपयोग करें:

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }

Comments

यह आश्चर्यजनक रूप से अच्छा है। इसके लिए आपको @ ngx-Translate की भी आवश्यकता नहीं है। क्या आप बता सकते हैं कि खाका में कथन क्या है?

— लामा

@ लामा, नियत तारीख (किसी भी तारीख को आप प्रारूपित करना चाहते हैं) | दिनांक: 'शॉर्टडेट' ( फॉर्मैट के लिए डेट पाइप के लिए पहला पैरामीटर) : '' (2 पैरामीटर => टाइमज़ोन, "जब आपूर्ति नहीं की जाती है, तो एंड-यूज़र के स्थानीय सिस्टम टाइमज़ोन का उपयोग करता है") : trasnlateServiceSurrentLang (तीसरा पैरामीटर) => स्थानीय), चिक इस डेटपाइप

— डिएगो ओस्सोरियो

क्या होगा अगर आपके पास अनुकूलित प्रारूप है? क्या इसका स्थानीयकरण भी किया जाएगा?

— वाइल्डहैमर

Answer 5

मैंने date_pipe.ts में एक नज़र डाली है और इसमें दो बिट्स की जानकारी है जो ब्याज की हैं। शीर्ष के पास निम्नलिखित दो लाइनें हैं:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

नीचे के पास यह रेखा है:

return DateFormatter.format(value, defaultLocale, pattern);

इससे मुझे पता चलता है कि वर्तमान में डेट पाइप 'एन-यूएस' होने के लिए हार्ड-कोडेड है।

अगर मैं गलत हूं तो कृपया मुझे बताएं।

Comments

github.com/angular/angular/blob/master/modules/@angular/common/…

— julestruong

आप नीचे कोरोला के उत्तर की जांच करना चाह सकते हैं। यह अधिक अद्यतित है और एक महान समाधान प्रदान करता है।

— मार्क लैंगर

Answer 6

App.module.ts पर निम्न आयात जोड़ें। यहाँ LOCALE विकल्पों की एक सूची है ।

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

फिर प्रदाता जोड़ें

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

HTML में पाइप का उपयोग करें। इसके लिए कोणीय दस्तावेज यहां दिया गया है ।

{{ dateObject | date: 'medium' }}

Comments

जस्टो नोलितिबाबा एस्टो!

— अलेक्सवार्स

Answer 7

आप कुछ इस तरह से करें:

{{ dateObj | date:'shortDate' }}

या

{{ dateObj | date:'ddmmy' }}

देखें: https://angular.io/docs/ts/latest/api/common/index/DatePipe/pex.html

Comments

खेद है कि अगर यह मेरे सवाल में स्पष्ट नहीं था, लेकिन यह वास्तव में क्या कर रहा है, लेकिन पैटर्न 'शॉर्टडेट' के साथ और यह केवल यूएस शैली में दिखता है। समय शैली ठीक है।

— nsbm

दूसरा उदाहरण एक प्रारूप दिखाता है जो DatePipe को पास हो जाता है, यही वह है जो आप नहीं चाहते थे?

— लैंगली

कोशिश की, लेकिन यह काम नहीं करता है। दिनांक से स्वतंत्र रूप से केवल '5' संख्या दिखाएं।

— nsbm

Answer 8

मैं एक ही मुद्दे के साथ संघर्ष कर रहा था और मेरे लिए यह काम नहीं कर रहा था

{{dateObj | date:'ydM'}}

इसलिए, मैंने एक समाधान की कोशिश की है, सबसे अच्छा समाधान नहीं है लेकिन यह काम किया है:

{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}

मैं हमेशा एक कस्टम पाइप बना सकता हूं।

Answer 9

एओटी की समस्या वाले लोगों के लिए, आपको इसे उपयोग के साथ थोड़ा अलग तरीके से करने की आवश्यकता है:

export function getCulture() {
    return 'fr-CA';
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useFactory: getCulture },
    //otherProviders...
  ]
})

Comments

कोणीय 5 के रूप में, आप प्रदाताओं सरणी में एक मोटी तीर अभिव्यक्ति का उपयोग कर सकते हैं

— iuliust

{ provide: LOCALE_ID, useFactory: () => 'fr-CA'}मेरे लिए चाल

— चली

Answer 10

Google पाइप को लोकेल में बदल दिया गया और यह मेरे देश के लिए काम करता है यह पॉसिबल है, उन्होंने इसे सभी स्थानों के लिए खत्म नहीं किया। नीचे कोड है।

import {
    isDate,
    isNumber,
    isPresent,
    Date,
    DateWrapper,
    CONST,
    isBlank,
    FunctionWrapper
} from 'angular2/src/facade/lang';
import {DateFormatter} from 'angular2/src/facade/intl';
import {PipeTransform, WrappedValue, Pipe, Injectable} from 'angular2/core';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';


var defaultLocale: string = 'hr';

@CONST()
@Pipe({ name: 'mydate', pure: true })
@Injectable()
export class DatetimeTempPipe implements PipeTransform {
    /** @internal */
    static _ALIASES: { [key: string]: String } = {
        'medium': 'yMMMdjms',
        'short': 'yMdjm',
        'fullDate': 'yMMMMEEEEd',
        'longDate': 'yMMMMd',
        'mediumDate': 'yMMMd',
        'shortDate': 'yMd',
        'mediumTime': 'jms',
        'shortTime': 'jm'
    };


    transform(value: any, args: any[]): string {
        if (isBlank(value)) return null;

        if (!this.supports(value)) {
            console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
        }

        var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
        if (isNumber(value)) {
            value = DateWrapper.fromMillis(value);
        }
        if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern)) {
            pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
        }
        return DateFormatter.format(value, defaultLocale, pattern);
    }

    supports(obj: any): boolean { return isDate(obj) || isNumber(obj); }
}

Answer 11

ठीक है, मैं इस समाधान का प्रस्ताव करता हूं, बहुत सरल, का उपयोग करके ngx-translate

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
}

  transform(value: any): any {
    const date = new Date(value);

    const options = { weekday: 'long',
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit'
                    };

    return date.toLocaleString(this.translateService.currentLang, options);
  }

}

Answer 12

यह थोड़ी देर हो सकती है, लेकिन मेरे मामले में (कोणीय 6), मैंने डेटपाइप के ऊपर एक साधारण पाइप बनाया, कुछ इस तरह से:

private _regionSub: Subscription;
private _localeId: string;

constructor(private _datePipe: DatePipe, private _store: Store<any>) {
  this._localeId = 'en-AU';
  this._regionSub = this._store.pipe(select(selectLocaleId))
    .subscribe((localeId: string) => {
      this._localeId = localeId || 'en-AU';
    });
}

ngOnDestroy() { // Unsubscribe }

transform(value: string | number, format?: string): string {
  const dateFormat = format || getLocaleDateFormat(this._localeId, FormatWidth.Short);
  return this._datePipe.transform(value, dateFormat, undefined, this._localeId);
}

सबसे अच्छा समाधान नहीं हो सकता है, लेकिन सरल और काम करता है।