পাইপ ব্যবহার করে তারিখটি ডিডি / এমএম / ইয়ি হিসাবে ফর্ম্যাট করুন

Question

আমি dateআমার তারিখের ফর্ম্যাট করতে পাইপটি ব্যবহার করছি , তবে আমি ঠিক মতো ফর্ম্যাটটি পেতে চাই না a আমি কি পাইপগুলি ভুলভাবে বুঝতে পারছি বা সম্ভব না?

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h3>{{date | date: 'ddMMyyyy'}}, should be 
      {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.date = new Date();
  }
}

plnkr ভিউ

Comments

dateপাইপ বিভিন্ন বিষয় বর্তমানে আছে।

— গন্টার জ্যাচবাউয়ার

এই প্রকাশের প্রার্থী এখনও খানিকটা অসম্পূর্ণ বোধ করছেন। এটি 2 দিনের মধ্যে আমি হোঁচট খেয়েছি দ্বিতীয় সমস্যা .. আশা করি তারা খুব শীঘ্রই এটি ঠিক করে দেবে। এর জন্য আপনার নিজস্ব পাইপ তৈরি করা বিকল্প, তবে এটি কিছুটা সদৃশ হওয়ার মতো মনে হচ্ছে .. এবং আপনি এটি কয়েক মাসের মধ্যে মুছে ফেলতে পারেন ..

— মার্টেন কিফ্ট

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

— এনএসবিএম

angulartutorial.net/2017/04/…

— প্রশোভ

ফর্ম্যাটগুলি: কৌণিক.ইও

— রবার্ট রাজা

Answer 1

পাইপ তারিখ বিন্যাস বাগ কৌণিক 2.0.0-rc.2 সংশোধন, এই টানুন অনুরোধ ।

এখন আমরা প্রচলিত উপায়ে করতে পারি:

{{valueDate | date: 'dd/MM/yyyy'}}

---

উদাহরণ:

বর্তমান সংস্করণ:

Example Angular 8.x.x

---

পুরানো সংস্করণ:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

---

ডকুমেন্টেশন আরও তথ্য DatePipe

Comments

ধন্যবাদ, শুধু IE11 ++ ফর্ম্যাট ইস্যু, সিএফ জন্য অতিরিক্ত টিপস যুক্ত করতে চাই stackoverflow.com/questions/39728481/...

— boly38

কৌণিক 5 এ এটি আপাতদৃষ্টিতে @ boly38 সমাধান করা হয়েছে, উত্তরে আপডেটটি অনুসরণ করুন। এবং প্রশ্নের উত্তরটিতে

— ফার্নান্দো লিয়াল

আমি ডাব হিসাবে এপিআই থেকে তারিখ পাচ্ছি: "2019-02-05 00:00:00"। আমি 00:00:00 অপসারণ করতে চাই এবং আমার কৌনিক in এ একটি টেম্পলেট চালিত ফর্ম রয়েছে My আমার ইনপুট ক্ষেত্রটি এখানে দেওয়া আছে। <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> আমি এটা কিভাবে ঠিক করবো ?

— দিনুকা

@ ফার্নান্দোলিয়েল - এটি আশ্চর্যজনক। এর জন্য ধন্যবাদ.

— জোশ

এটি অনুবাদযোগ্য হবে না।

— আমের শাহজাদ

Answer 2

কৌনিক / সাধারণ থেকে ডেট পাইপ আমদানি করুন এবং তারপরে নীচের কোডটি ব্যবহার করুন:

var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');

যেখানে ইউজারডেট আপনার তারিখের স্ট্রিং হবে। দেখুন এই সাহায্য করে কিনা।

তারিখ এবং বছরের জন্য ছোট হাতের নোট করুন:

d- date
M- month
y-year

সম্পাদনা

আপনাকে localeসর্বশেষ কৌণিকের সাথে তারিখ পাইপের আর্গুমেন্ট হিসাবে স্ট্রিংটি পাস করতে হবে । আমি কৌনিক 4.x এ পরীক্ষা করেছি

উদাহরণ স্বরূপ:

var datePipe = new DatePipe('en-US');

Comments

এটি, কোনও কারণে খুব ভারী বলে মনে হচ্ছে। আমরা একই জিনিসটি করছি (পরিবর্তন সনাক্তকরণে) এবং এটি আমাদের অ্যাপ্লিকেশনটির কার্যকর হওয়ার 75% সময়

— নিচ্ছে

কৌণিক 2.1.1 সহ, এই ত্রুটিটি নিক্ষেপ করা Supplied parameters do not match any signature of call target.হয়new DatePipe()

— saiy2k

আপনি এর মতো কিছু ব্যবহার করতে পারেনnew DatePipe('en-US');

— চাদ কুহেন

হাই, আমি 26 ফেব্রুয়ারির মতো কৌনিক 2 তে এই একই ফর্ম্যাটটিতে যেতে চাই, (আমি বছর চাই না) কীভাবে?

— ইয়ালা রমেশ

হিপ্রশান্ত, আমি ত্রুটিটি পেয়েছি 'আনহানডেলড প্রতিশ্রুতি প্রত্যাখ্যান: ডেটপাইপের কোনও সরবরাহকারী নেই! '।

— এমএমআর

Answer 3

আপনি একটি সাধারণ কাস্টম পাইপ ব্যবহার করে এটি অর্জন করতে পারেন।

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'dd/MM/yyyy');
        return value;
    }
}


{{currentDate | dateFormatPipe }}

একটি কাস্টম পাইপ ব্যবহারের সুবিধা হ'ল, আপনি যদি ভবিষ্যতে তারিখের ফর্ম্যাটটি আপডেট করতে চান, আপনি গিয়ে নিজের কাস্টম পাইপটি আপডেট করতে পারবেন এবং এটি সর্বত্র প্রতিফলিত হবে।

কাস্টম পাইপ উদাহরণ

Answer 4

যখনই আমার কোনও কারণে তারিখগুলি ব্যবহার করা প্রয়োজন তখন আমি সর্বদা মোমেন্ট.জেএস ব্যবহার করি।

এটা চেষ্টা কর:

import { Pipe, PipeTransform } from '@angular/core'
import * as moment from 'moment'

@Pipe({
   name: 'formatDate'
})
export class DatePipe implements PipeTransform {
   transform(date: any, args?: any): any {
     let d = new Date(date)
     return moment(d).format('DD/MM/YYYY')

   }
}

এবং দেখুন:

<p>{{ date | formatDate }}</p>

Comments

momentফরম্যাটের মতো ছোট্ট কাজের জন্য লাইব্রেরিটি অনেক বড়!

— আল-মোতাহাফার 16'17

@ ওরিয়ানা, সুন্দর উত্তর। আমি এটি এইভাবে ব্যবহার করি; item.deferredStartDate = item.deferredStartDate? মুহূর্ত (আইটেম.ডেফার্ড স্টার্টডেট)। টু ডেট (): নাল; এটি আপনার বাস্তবায়নের মতোই একই।

— কুশন রানদিমা

Answer 5

আমি এই অস্থায়ী সমাধানটি ব্যবহার করছি:

import {Pipe, PipeTransform} from "angular2/core";
import {DateFormatter} from 'angular2/src/facade/intl';

@Pipe({
    name: 'dateFormat'
})
export class DateFormat implements PipeTransform {
    transform(value: any, args: string[]): any {
        if (value) {
            var date = value instanceof Date ? value : new Date(value);
            return DateFormatter.format(date, 'pt', 'dd/MM/yyyy');
        }
    }
}

Comments

আমি কৌনিক 2 এ নতুন এবং এটি করতে সমস্যা হচ্ছে। আমি এটির নিজস্ব টিএস ফাইলে এটি যুক্ত করেছি (জেএস-এ সংকলিত)। আমি অ্যাপ্লিকেশনের উপাদান হিসাবে এটি তখন আমার শিশু কম্পোমেন্টের কনস্ট্রাক্টর হিসাবে সরবরাহকারী হিসাবে যুক্ত করার সহ অনেকগুলি বিষয় চেষ্টা করেছিলাম কিন্তু আমি এটি পেতে পারি নি। ত্রুটিটি হ'ল; "পাইপ 'ডেটফর্ম্যাট' পাওয়া যায়নি"। আপনি কি দয়া করে এটি বাস্তবায়ন করবেন তার একটি দ্রুত ওভারভিউ দিতে পারেন। এখানে প্যাকেজগুলি আমি "নির্ভরতা" ব্যবহার করছি: ang "কৌণিক 2": "2.0.0-beta.17", "systemjs": "0.19.25", "এস 6-শিম": "^ 0.35.0", " প্রতিবিম্ব-মেটাডেটা ":" 0.1.2 "," আরএক্সজেস ":" 5.0.0-বিটা.2 "," জোন.জেএস ":" 0.6.10 "},

— ক্রেগ বি

আপনি কি দয়া করে আপনার কোডটি সংশোধন করে নেবেন? দয়া করে কৌণিক 2 এর সর্বশেষ সংস্করণটি ব্যবহার করুন

— দীপক

@ প্রদীপরাও এখানে 'পিটি' কী? এবং আমি কীভাবে আমার উপাদানটিতে এই পাইপটিকে কল করব? লেট তারিখ = নতুন তারিখফর্ম্যাট ()। রূপান্তর (ইনপুট); আমাকে সংশোধন করুন এবং আমি যদি hh: মিমি, অর্থাৎ সময় প্রদর্শন করতে চাই তবে কী

— নায়িকা

Answer 6

যদি কেউ সময় এবং সময় অঞ্চল দিয়ে দেখে তবে এটি আপনার পক্ষে

 {{data.ct | date :'dd-MMM-yy h:mm:ss a '}}

তারিখ এবং সময় বিন্যাসের শেষে টাইম জোনের জন্য z যুক্ত করুন

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}

Answer 7

কৌণিক: 8.2.11

<td>{{ data.DateofBirth | date }}</td>

আউটপুট: জুন 9, 1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

আউটপুট: 09/06/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

আউটপুট: 09/06/1973 12:00 এএম

Comments

দ্বিতীয় এবং তৃতীয় উদাহরণ একই এবং বিভিন্ন আউটপুট উত্পন্ন?

— Jp_

Answer 8

আমার জন্য কাজ করা একমাত্র জিনিসটি এখান থেকে অনুপ্রাণিত হয়েছিল: https://stackoverflow.com/a/35527407/2310544

খাঁটি ডিডি / এমএম / ইয়ের জন্য, এটি আমার পক্ষে কৌনিক 2 বিটা 16 সহ কাজ করেছে:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}

Comments

এটি বিটা সংস্করণগুলির জন্য বেশ পঠনযোগ্য হ্যাক, জানেন না কেন এটি হ্রাস পেয়েছিল তবে আমি এটি আবার শূন্যে ফিরিয়ে আনব;)

— স্যাম ভ্লোবার্গস

Answer 9

যদি কেউ এঙ্গুলার 6 এ এএম বা প্রধানমন্ত্রী সময় সহ তারিখ প্রদর্শন করতে পারে তবে এটি আপনার জন্য।

{{date | date: 'dd/MM/yyyy hh:mm a'}}

আউটপুট

প্রাক-সংজ্ঞায়িত ফর্ম্যাট বিকল্পগুলি

উদাহরণগুলি এন-মার্কিন লোকালে দেওয়া আছে।

'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
'shortDate': equivalent to 'M/d/yy' (6/15/15).
'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a' (9:03 AM).
'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

রেফারেন্স লিংক

Answer 10

আমি মনে করি এটি লোকালগুলিতে হার্ডকোডযুক্ত কারণ DatePipe। এই লিঙ্কটি দেখুন:

• https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

এবং এই মুহুর্তে কনফিগারেশন দ্বারা এই স্থানীয় আপডেট করার কোন উপায় নেই।

Answer 11

ম্যাকোস এবং আইওএসে সাফারি ব্রাউজারের টাইপস্ক্রিপ্টের সাথে অ্যাংুলার 2 তে ডেট পাইপগুলি সঠিকভাবে আচরণ করে না। আমি সম্প্রতি এই সমস্যাটির মুখোমুখি হয়েছি। সমস্যাটি সমাধান করার জন্য আমাকে এখানে মুহূর্তের js ব্যবহার করতে হয়েছিল। সংক্ষেপে আমি কী করেছি তা উল্লেখ করে ...

1. আপনার প্রকল্পে momentjs এনপিএম প্যাকেজ যুক্ত করুন।

2. Xyz.component.html এর অধীনে (এখানে নোট করুন যে স্টার্টডেটটাইম ডাটা টাইপের স্ট্রিংয়ের)

{{ convertDateToString(objectName.startDateTime) }}

3. Xyz.componal.ts এর অধীনে,

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}

Comments

আপনি যদি এমন কোডটি দেখিয়েছিলেন যা আপনি মুহুর্তের সাথে ব্যবহার করেছেন যাতে এটি সহায়তা করবে যাতে যে কেউ যে সমাধানটি চেষ্টা করতে চেয়েছিল তাদের এখনও এটি খুঁজে বের করতে হবে না।

— চমত্কার

সমাধান সহ আমার মন্তব্য আপডেট। দয়া করে চেক করুন।

— নিখিল

Answer 12

ফর্ম্যাটগুলির মতো আপনি এখানে ডেট পাইপ সম্পর্কে আরও তথ্য পেতে পারেন ।

আপনি যদি এটি আপনার উপাদানটিতে ব্যবহার করতে চান তবে আপনি কেবল এটি করতে পারেন

pipe = new DatePipe('en-US'); // Use your own locale

এখন, আপনি কেবল তার রূপান্তর পদ্ধতিটি ব্যবহার করতে পারেন, যা হবে

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');

Answer 13

তারিখ পাইপকে যুক্তি হিসাবে আপনাকে লোকেল স্ট্রিংটি পাস করতে হবে।

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

প্রাক-সংজ্ঞায়িত ফর্ম্যাট বিকল্পগুলি:

1.      'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
2.      'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
3.      'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
4.      'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
5.      'shortDate': equivalent to 'M/d/yy' (6/15/15).
6.      'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
7.      'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
8.      'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
9.      'shortTime': equivalent to 'h:mm a' (9:03 AM).
10. 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
11. 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
12. 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

app.componal.module.ts এ তারিখ পাইপ যুক্ত করুন

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 14

আপনি এই ধরণের জিনিসগুলির জন্য momentjs ব্যবহার করতে পারেন। মোমেন্টজগুলি জাভাস্ক্রিপ্টে পার্স, বৈধতা, হেরফের এবং তারিখ প্রদর্শনের ক্ষেত্রে সেরা।

আমি উরিশ থেকে এই পাইপটি ব্যবহার করেছি, যা আমার পক্ষে ভাল কাজ করে:

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

আরগস প্যারামিটারে আপনি নিজের তারিখের ফর্ম্যাটটি এড়াতে পারেন: "ডিডি / মিমি / ইয়াই"

Comments

লিঙ্কটি ভাঙা, লিঙ্কটি এখন github.com/urish/angular2-moment/blob/master/src/…

— টনি

Answer 15

আমার ক্ষেত্রে, আমি উপাদান ফাইলটিতে ব্যবহার করি:

import {formatDate} from '@angular/common';

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

এবং উপাদান HTML ফাইল মধ্যে

<h1> {{ displayDate }} </h1>

এটি আমার জন্য দারুণ কাজ করছে ;-)