Parse a date with DatePipe

Question

I am using a datepipe to convert a Date into a string.

var mydate : Date = new Date ();

That works in the template

{{ mydate | date: "dd.MM.yyyy" }}

as well as in the class

 let str : string = this.dp.transform (dtm, "dd.MM.yyyy");

Is there a way to do the reverse? So the pipe should parse a string and gets me a Date.

Isn't what you expect the behavior of ```new Date(dateAsString)```? — maury844, Oct 18 '19 at 13:53
@maury844 With that date format, the output would be browser dependent. — Heretic Monkey, Oct 18 '19 at 14:03
Possible duplicate of [Converting a string to a date in JavaScript](https://stackoverflow.com/questions/5619202/converting-a-string-to-a-date-in-javascript) — Heretic Monkey, Oct 18 '19 at 20:31

score 2 · Answer 1 · edited Oct 18 '19 at 14:12

Yes! you can create your own Pipe that implements the PipeTransform.

Please look at this : https://ultimatecourses.com/blog/angular-pipes-custom-pipes

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

@Pipe({ name: 'stringToDate' })
export class StringToDate implements PipeTransform {
  transform(stringDate: string) {
    // Do the conversion, Formating, substring ... here
    let newDate = new Date(stringDate);
    return newDate ;
  }
}

Import this Pipe into your ngModule, and use it in the Template

score 2 · Accepted Answer · answered Oct 22 '19 at 06:41

So formatting and parsing is not natively possible. I did it with JavaScript RegExp to parse the date by myself. Another alternative would be moments.js but I did not use that.

<input type="text" placeholder="DD.MM.YYYY" [value]="mydate | date: 'dd.MM.yyyy'" (change)="setDate ($event)"/>


setDate (e)
{
  let val : string = e.target.value;

  let rgx : RegExp = new RegExp ("^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$");   // DD.MM.YYYY

  let match : Array <string>  = rgx.exec (val);
  if (match != null)
  {
    this.selday = new Date (Number (match [3]), Number (match [2]) - 1, Number (match [1]));
    this.requestData ();
  }
}

score 1 · Answer 3 · edited Oct 18 '19 at 14:14

The Date.parse() method parses a string representation of a date, and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC or NaN if the string is unrecognized or, in some cases, contains illegal date values (e.g. 2015-02-31).

var unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT');
var javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT');

console.log(unixTimeZero);
// expected output: 0

console.log(javaScriptRelease);
// expected output: 818035920000

Date.parse docs here.

score 0 · Answer 4 · answered Sep 09 '20 at 00:30

For me, library moment was the best and consistent alternative to do this, just install the dependency and use it directly.

npm install moment

And simply at your code:

import * as moment from 'moment';
...
public parse(stringDate: string, stringFormat: string, lang: string): Date {
    try {
      const dateMoment = moment(stringDate, stringFormat.toUpperCase(), lang, true);
      if (dateMoment && dateMoment.isValid()) {
        return dateMoment.toDate();
      }
      return null;
    } catch (e) {
      console.error('Error while parsing date', stringDate, e);
      return null;
    }
}

Later you can just use:

this.parse('2020-08-09', 'yyyy-MM-dd', 'en');

Parse a date with DatePipe

4 Answers4