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




angular angular-pipe (8)

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

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

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

{{ convertDateToString(objectName.startDateTime) }}

  1. Xyz.component.ts के तहत,

import * as moment from 'moment';

'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).

मैं अपनी तिथि को प्रारूपित करने के लिए 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 दृश्य


अगर कोई एएमएल या पीएम के साथ कोणीय 6 में समय प्रदर्शित करना चाहता है तो यह आपके लिए है।

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

उत्पादन

पूर्व-निर्धारित प्रारूप विकल्प

उदाहरण एन-यूएस लोकेल में दिए गए हैं।

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

angular.io/api/common/DatePipe


आप एक साधारण कस्टम पाइप द्वारा इसका उपयोग कर सकते हैं।

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

एक कस्टम पाइप का उपयोग करने का लाभ यह है कि, यदि आप भविष्य में दिनांक प्रारूप को अपडेट करना चाहते हैं, तो आप अपने कस्टम पाइप को अपडेट करके जा सकते हैं और यह हर जगह को प्रतिबिंबित करेगा।

angulartutorial.net/2017/04/…


आप डेट पाइप के बारे में अधिक जानकारी पा सकते हैं, जैसे प्रारूप।

यदि आप इसे अपने घटक में उपयोग करना चाहते हैं, तो आप बस कर सकते हैं

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

अब, आप बस इसकी परिवर्तन विधि का उपयोग कर सकते हैं, जो कि होगी

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

पाइप तिथि प्रारूप बग को कोणीय 2.0.0-rc.2 में तय किया गया है, यह पुल अनुरोध

अब हम पारंपरिक तरीके से कर सकते हैं:

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

उदाहरण:

वर्तमान संस्करण:

उदाहरण कोणीय 8.xx

पुराने संस्करणों:

उदाहरण कोणीय 7.x

उदाहरण कोणीय 6.x

उदाहरण कोणीय 4.x

उदाहरण कोणीय 2.x

प्रलेखन DatePipe में अधिक जानकारी


मुझे लगता है कि यह इसलिए है क्योंकि लोकल DatePipe में हार्डकोडेड है। इस लिंक को देखें:

और अभी कॉन्फ़िगरेशन द्वारा इस स्थान को अपडेट करने का कोई तरीका नहीं है।


मैं इस अस्थायी समाधान का उपयोग कर रहा हूँ:

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

मैं हमेशा 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>





date-pipe