অ্যাঙ্গুলার 2 এ ডেটপাইপে লোকেল কীভাবে সেট করবেন?

Question

আমি ইউরোপীয় ফর্ম্যাট ব্যবহার করে তারিখটি প্রদর্শন করতে চাই dd/MM/yyyyতবে ডেট পাইপ শর্ট ডেট ফর্ম্যাটটি ব্যবহার করে এটি কেবল মার্কিন তারিখের শৈলী ব্যবহার করে প্রদর্শিত হয় MM/dd/yyyy।
আমি ধরে নিচ্ছি যে ডিফল্ট লোকেলটি en_US। সম্ভবত আমি ডক্সে নিখোঁজ রয়েছি তবে আমি কীভাবে একটি Angular2 অ্যাপে ডিফল্ট লোকাল সেটিংস পরিবর্তন করতে পারি? অথবা ডেটপাইপে একটি কাস্টম ফর্ম্যাটটি পাস করার কোনও উপায় আছে?

Comments

আমি এটি জানতে চাই। আমি তারিখের পাইপ ডক্সটি পেয়েছি যা y এর m 'এবং d এর ফর্ম্যাট স্ট্রিংয়ের ক্রমটি ব্যাখ্যা করে যাতে লোকেল দ্বারা আদেশ সেট করার কারণে তা উপেক্ষা করা হয়। তবে কীভাবে লোকেল সেট করবেন (বা এমনকি পাবেন) তার কোনও ইঙ্গিতও নেই।

— মার্ক ফার্মিলো

Answer 1

Angular2 RC6 হিসাবে, আপনি কোনও সরবরাহকারী যুক্ত করে আপনার অ্যাপ্লিকেশন মডিউলে ডিফল্ট লোকাল সেট করতে পারেন:

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

মুদ্রা / তারিখ / নম্বর পাইপগুলির লোকেলটি বেছে নেওয়া উচিত। LOCALE_ID একটি ওপাক টোকেন , কৌনিক / মূল থেকে আমদানি করা।

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

আরও উন্নত ব্যবহারের ক্ষেত্রে আপনি কোনও পরিষেবা থেকে লোকেল তুলতে চাইতে পারেন। তারিখ পাইপ ব্যবহার করে উপাদান তৈরি করা হলে লোকেলগুলি একবারে সমাধান করা হবে:

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

আশা করি এটা তোমার জন্য কাজ করবে।

Comments

আমি অবাক হয়েছি এটি এখনও কোথাও নথিভুক্ত করা হয় না। তারিখ পাইপ পৃষ্ঠায় নয় ( কৌণিক.ইও / ডকস / টিএস / স্লেস্ট / অ্যাপি / কমোন / ইনডেক্স / ডেট পাইপ- পাইপ এইচটিএমএল ), সাধারণ পাইপ পৃষ্ঠায় নয় .html ) এবং এই প্রশ্নটি আসলে গুগলে প্রথম হিট ( google.com/search?q=angular%202%20locales&rct=j )। দুর্দান্ত খুঁজে।

— জেপি দশ বার্জ

কোডে পাইপ ব্যবহার করতে এখন আপনাকে অবশ্যই এটি রূপান্তর করতে হবে new CurrencyPipe('en-US');। আমার ইস্যু গুগল করার সময় এটি প্রথম ফলাফল হিসাবে প্রদর্শিত হিসাবে আশা করা যায় এটি কোনও কিছুর জন্য কার্যকর fully

— অ্যাশ ব্লু

@ করোল্লা আপনি কি সেই পরিষেবাটিতে কিছুটা আলোকপাত করতে পারেন? অ্যাপটি চলাকালীন আমি লোকেলটি পরিবর্তন করতে চাই, এই পরিষেবাটি দিয়ে কি সম্ভব? এবং আমি কীভাবে এই ধরনের পরিষেবাটি প্রয়োগ করব?

— মার্টিজন ভ্যান ডেন বার্গ

@ মার্তিজনভান্ডেনবার্গ, পরিষেবাটি কেবল লোকাল স্ট্রিং ফিরিয়ে দেয় - অভিনব কোনও কিছুই নয়। অ্যাপ চলাকালীন আমাদের লোকেল পরিবর্তন করার চেষ্টা করার মিশ্র ফলাফল রয়েছে results সমস্ত ক্ষেত্রে পরিচালনা করতে পুনরায় লোডিং পৃষ্ঠাটি শেষ হয়েছিল। 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);
  }

}

এখন যদি আপনি অনুবাদ পরিষেবা ব্যবহার করে অ্যাপ্লিকেশন প্রদর্শনের ভাষা পরিবর্তন করেন ( এনজিএক্স-অনুবাদ দেখুন )

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

আমি টেমপ্লেট বিশ্লেষণ ত্রুটি পাচ্ছি; প্রস্তাবিত একইভাবে আমি ফিল্টার 'স্থানীয়করণের তারিখ' সংকলন করতে পারি না।

— প্রসাদ শিন্দে

আপনি কি স্থানীয়ভাবে ডেট পাইপ সঠিকভাবে ঘোষণা করেছেন? পাইপ.মডিউল.টি আমার উদাহরণ প্রকল্পে দেখুন ।

— মিলান হিলিনেক

হ্যাঁ, আমি আগেই এটি সমাধান করেছি, @ মিলান হিলিনাকের আমার মন্তব্যটি কেবল তখনই উত্তর দেওয়া উচিত ছিল। তবে যাইহোক আপনার তাত্ক্ষণিক প্রতিক্রিয়ার জন্য ধন্যবাদ। আপনি ভাল করছেন.

— প্রসাদ শিন্ডে

এটি আমি যা খুঁজছিলাম স্পষ্টতই এটি। এটি লজ্জার বিষয় যে কাস্টম পাইপটি কেবল রানটাইমের সময়

— লোকাল

এটি কাজ করে তবে মনোযোগ দিন যে একটি "অপরিষ্কার" পাইপ ব্যবহার করা "খাঁটি" এর চেয়ে ধীর। যেমন কৌণিক নির্দেশিকা বলেছেন: কৌণিক প্রতিটি উপাদান পরিবর্তন সনাক্তকরণ চক্রের সময় একটি অপরিষ্কার পাইপ কার্যকর করে। অপরিষ্কার পাইপকে প্রায়শই বলা হয়, প্রতিবার কী-স্ট্রোক বা মাউস-চাল হিসাবে। সেই উদ্বেগকে মাথায় রেখে মহান যত্ন সহ একটি অপরিষ্কার পাইপ প্রয়োগ করুন। একটি ব্যয়বহুল, দীর্ঘ-চলমান পাইপ ব্যবহারকারীর অভিজ্ঞতা নষ্ট করতে পারে।

— লুকা রিতোসা

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

প্রকৃতপক্ষে যদি আপনাকে এন-ইউএস ব্যতীত অন্য কোনও স্থানীয় লোকের প্রয়োজন হয় তবে আপনার এটি নিবন্ধ করা উচিত। উত্তরের জন্য ধন্যবাদ, @ জাগু

— মিক্কারিন

ঠিক আছে যে আমাকে অন্য মাথাব্যথা প্রতিরোধ .. Thx! ডকটি কিছুটা জটিল, যেহেতু আমি যদিও এটি registerLocaleDataযথেষ্ট ছিলাম, ভাল তা নয়।

— বিপদ 89

অয়ন 4 এর সেরা উত্তর!

— parrycima

Answer 4

আপনি যদি ব্যবহার TranslateServiceকরেন তবে @ngx-translate/coreনীচে একটি নতুন পাইপ তৈরি না করে একটি সংস্করণ যা রানটাইমটিতে গতিশীল পরিবর্তন করতে চলেছে (কৌণিক on তে পরীক্ষা করা হয়েছে)। ডেটপাইপের 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

এটি আশ্চর্যজনকভাবে দুর্দান্ত। এমনকি আপনার জন্য @ এনজিএক্স-অনুবাদ করার দরকার নেই। টেম্পলেটটিতে বিবৃতিটি কী করে তা আপনি ব্যাখ্যা করতে পারেন?

— লামা

@ আল্লামা, নির্ধারিত তারিখ (যে তারিখটি আপনি বিন্যাস করতে চান) | তারিখ: 'শর্টডেট' ('ফর্ম্যাট' অনুসারে ডেট পাইপের 1 ম প্যারামিটার) : '' (2 য় প্যারামিটার => টাইমজোন, "যখন সরবরাহ করা হয় না, শেষ ব্যবহারকারীর স্থানীয় সিস্টেমের সময় অঞ্চল ব্যবহার করে"।) : ট্রান্সলেটস সার্ভিস.কন্ট্রালং (তৃতীয় প্যারামিটার) => স্থানীয়), এই তারিখের পাইপটিকে ছানা দিন

— ডিয়েগো

আপনি যদি স্বনির্ধারিত বিন্যাস আছে? তাও কি স্থানীয়করণ হবে?

— ওয়াইল্ডহ্যামার

Answer 5

আমি ডেট_পাইপ.সেটে একবার দেখেছি এবং এর দুটি বিট তথ্য রয়েছে যা আগ্রহী। উপরের নিকটে নিম্নলিখিত দুটি লাইন রয়েছে:

// 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/…

— জুলাইরাসং

আপনি নীচে করোলার উত্তরটি পরীক্ষা করতে চাইতে পারেন। এটি আরও আধুনিক and এবং একটি দুর্দান্ত সমাধান সরবরাহ করে।

— মার্ক ল্যাঙ্গার

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
  ]
})

এইচটিএমএলে পাইপ ব্যবহার করুন। এটির জন্য কৌনিক ডকুমেন্টেশন এখানে ।

{{ dateObject | date: 'medium' }}

Comments

জাস্টো নেস্টিটাবা এস্তো!

— অ্যালেক্সাভিচগুলি

Answer 7

আপনি এরকম কিছু করুন:

{{ dateObj | date:'shortDate' }}

অথবা

{{ dateObj | date:'ddmmy' }}

দেখুন: https://angular.io/docs/ts/latest/api/common/index/DatePype-pipe.html

Comments

দুঃখিত, যদি এটি আমার প্রশ্নে পরিষ্কার না হয়ে থাকে তবে ঠিক এটিই করছি কিন্তু প্যাটার্ন 'শর্ট ডেট' দিয়ে এবং এটি কেবল মার্কিন স্টাইলে প্রদর্শিত হয়। সময়ের স্টাইল ঠিক আছে।

— এনএসবিএম

দ্বিতীয় উদাহরণটি একটি ফর্ম্যাটটি ডেটপাইপে পাস করে দেখায়, এটিই আপনি চান না?

— ল্যাংলি

চেষ্টা করেছেন কিন্তু কাজ করে না। তারিখটি স্বাধীনভাবে কেবল '5' নম্বরটি দেখান।

— এনএসবিএম

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

angular5 থেকে আপনি প্রদানকারীর অ্যারের মধ্যে একটি চর্বি তীর অভিব্যক্তি ব্যবহার করতে পারেন

— iuliust

{ provide: LOCALE_ID, useFactory: () => 'fr-CA'}আমার জন্য কৌশলটি করেছেন;)

— জোক্সিমেদিনা

Answer 10

গুগল পাইপটি অনুলিপি করে লোকেল পরিবর্তন হয়েছে এবং এটি আমার দেশের পক্ষে কাজ করে এটি সম্ভবত এটি তারা সমস্ত লোকেলের জন্য এটি শেষ করেনি। নীচে কোড দেওয়া আছে।

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

সেরা সমাধান নাও হতে পারে, তবে সহজ এবং কাজ করে।