Dd / MM / yyyy को पाइप का उपयोग करके प्रारूप की तारीख

Question

मैं dateअपनी तिथि को प्रारूपित करने के लिए पाइप का उपयोग कर रहा हूं , लेकिन मैं केवल सटीक प्रारूप नहीं प्राप्त कर सकता हूं जिसे मैं वर्कअराउंड के बिना चाहता हूं। क्या मैं पाइपों को गलत तरीके से समझ रहा हूं या बस संभव नहीं है?

//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 दिनों में ठोकर खाई है। उम्मीद है कि वे इसे जल्द ही ठीक कर लेंगे। इसके लिए अपने स्वयं के पाइप बनाना विकल्प है, लेकिन यह दोहराव की तरह महसूस होता है .. और आप इसे कुछ महीनों में हटा सकते हैं ..

— Maarten Kieft

Angular2 में DatePipe में लोकल सेट करने

— nsbm

angulartutorial.net/2017/04/04/…

— Prashobh

प्रारूप: angular.io/api/common/DatePipe

— रॉबर्ट किंग

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 ++ प्रारूप मुद्दे के लिए अतिरिक्त सुझाव संलग्न करना चाहते हैं, cf. stackoverflow.com/questions/39728481/…

— boly38

कोणीय 5 में यह जाहिरा तौर पर @ boly38 हल किया गया था, जवाब में अपडेट का पालन करें। और प्रश्न में मेरा उत्तर जुड़ा हुआ है: stackoverflow.com/a/46218711/2290538

— फर्नांडो लील

मुझे API से dob के रूप में तारीख मिल रही है: "2019-02-05 00:00:00"। मैं 00:00:00 को हटाना चाहता हूं और मेरे पास कोणीय 6. में एक टेम्पलेट संचालित फॉर्म है। मेरा इनपुट फ़ील्ड यहां दिया गया है। <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> मैं इसे कैसे ठीक करूं ?

— डेनुका

@FernandoLeal - यह आश्चर्यजनक है। इसके लिए धन्यवाद।

— जोश

यह अनुवाद करने योग्य नहीं होगा।

— आमेर शहजाद

Answer 2

कोणीय / आम से DatePipe आयात करें और फिर नीचे दिए गए कोड का उपयोग करें:

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

जहां userdate आपका दिनांक स्ट्रिंग होगा। देखें कि क्या यह मदद करता है।

तारीख और वर्ष के लिए लोअरकेस पर ध्यान दें:

d- date
M- month
y-year

संपादित करें

आपको localeनवीनतम कोणीय में DatePipe के तर्क के रूप में स्ट्रिंग पास करना होगा । मैंने कोणीय 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 में यही प्रारूप चाहता हूं (मैं वर्ष नहीं करना चाहता) कैसे?

— यला रमेश

Hiprashanth, मुझे त्रुटि मिल रही है 'अनहेल्ड प्रॉमिस रिजेक्शन: डेटप्राइप के लिए कोई प्रदाता नहीं! '।

— एमएमआर

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

मैं हमेशा Moment.js का उपयोग करता हूं जब मुझे किसी भी कारण से तारीखों का उपयोग करने की आवश्यकता होती है।

इसे इस्तेमाल करे:

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लाइब्रेरी एक छोटे से काम के लिए प्रारूप की तरह बहुत बड़ी है!

— अल-मोताफर

@ ओरियाना, अच्छा जवाब। मैं इसे इस तरह से उपयोग करता हूं; item.deferredStartDate = item.deferredStartDate? पल (आइटम। डिफर्डस्टार्टडेट) .toDate (): null; यह आपके कार्यान्वयन के समान ही है।

— कुषाण रंधिमा

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 के लिए नया हूं और इसे जाने में परेशानी हो रही है। मैंने इसे अपने TS फ़ाइल (js के लिए संकलित) में जोड़ा। मैंने ऐप कंपोनेंट पर एक प्रदाता के रूप में इसे जोड़ने के लिए कई चीजों की कोशिश की, फिर मेरे बच्चे के कंस्ट्रक्टर के कंपोनेंट में, लेकिन मैं इसे जाने के लिए नहीं मिला। त्रुटि है; "पाइप 'डेटफ़ॉर्मैट' नहीं मिल सका"। क्या आप मुझे इस पर अमल करने का एक त्वरित अवलोकन दे सकते हैं। यहां वे पैकेज हैं जो मैं "निर्भरता" का उपयोग कर रहा हूं: {"angular2": "2.0.0-beta.17", "systemjs": "0.19.25", "es6-shim": "^ 0.35.0", " प्रतिबिंबित-मेटाडाटा ":" 0.1.2 "," आरएक्सजेएस ":" 5.0.0-बीटा.2 "," ज़ोन। जेएस ":" 0.6.10 "},

— क्रेग बी

क्या आप कृपया मुझे कोड सुधार कर सकते हैं कृपया angular2 के नवीनतम संस्करण का उपयोग करें

— दीपक

@Deepakrao 'pt' यहाँ क्या है? और मैं अपने घटक में इस पाइप को कैसे कॉल करूं? जैसे date = new DateFormat ()। transform (इनपुट); कृप्या मुझे सही करें। और क्या होगा यदि मैं 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>

आउटपुट: जून ९, १ ९ 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

दूसरा और तीसरा उदाहरण समान हैं और विभिन्न आउटपुट उत्पन्न करते हैं?

— जेपी_

Answer 8

मेरे लिए काम करने वाली एकमात्र चीज़ यहाँ से प्रेरित थी: https://stackoverflow.com/a/35527407/2310544

शुद्ध dd / MM / yyyy के लिए, इसने मेरे लिए काम किया, कोणीय 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

MacOS और iOS पर Safari ब्राउज़र के लिए टाइपस्क्रिप्ट के साथ डेट पाइप Angular 2 में सही व्यवहार नहीं करता है। मैंने हाल ही में इस मुद्दे का सामना किया। मुझे इस मुद्दे को हल करने के लिए क्षण js का उपयोग करना पड़ा। संक्षेप में मैंने जो किया है उसका उल्लेख ...

1. अपनी परियोजना में गतिज npm पैकेज जोड़ें।

2. Xyz.component.html के तहत, (यहां ध्यान दें कि startDateTime डेटा प्रकार स्ट्रिंग का है)

{{ convertDateToString(objectName.startDateTime) }}

3. Xyz.component.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

DatePipe के तर्क के रूप में आपको लोकल स्ट्रिंग को पास करना होगा।

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.component.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

आर्ग्स पैरामीटर में आप अपना दिनांक प्रारूप डाल सकते हैं जैसे: "dd / mm / yyyy"

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>

यह मेरे लिए ठीक काम करता है ;-)