कोणीय 2 में डेटपइप में लोकेल कैसे सेट करें?

Question

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

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 
} 

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

Answer 2

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

{{ dateObj | date:'shortDate' }}

या

{{ dateObj | date:'ddmmy' }}

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

Answer 3

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

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

यह मेरे लिए पता चलता है कि तारीख पाइप 'en-US होने के लिए वर्तमान में हार्ड-कोडेड है:

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

निचले भाग के पास इस लाइन है '।

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

Answer 4

मैं एक ही मुद्दे के साथ संघर्ष कर रहा था और इस का उपयोग करते हुए

{{dateObj | date:'ydM'}} 

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

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

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

Answer 5

कॉपी किया गया 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 6

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> 

या जाँच मेरी सरल "नोट्स" परियोजना here।

Answer 7

AOT के साथ उन लोगों के होने की समस्याओं के लिए, आप यह थोड़ा करने के लिए अलग तरह से एक useFactory साथ की जरूरत है:

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

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

Answer 8

ठीक है, मेरा प्रस्ताव यह समाधान, बहुत ही सरल, का उपयोग कर 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 9

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

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

app.module.ts

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

निम्न त्रुटि के लीड:

Error: Missing locale data for the locale "de-at".

angular5 के साथ आप लोड और इस्तेमाल किया लोकेल फ़ाइल रजिस्टर करने के लिए है स्वयं के बल पर।

app.module.ts

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

registerLocaleData(lcoaleDeAt); 

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

Documentation