Date format in Angular Datepicker component

27 Apr 20246 minutes to read

Date Format

Date format is a way of representing the date value in different string format in textbox.

By default the DatePicker’s format is based on the culture. You can also set the own custom format by using the format property.

Once the date format property has been defined it will be common to all the cultures.

To know more about the date format standards, refer to the Internationalization Date Format section.

The following example demonstrates the DatePicker with the custom format (yyyy-MM-dd).

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'




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

@Component({
imports: [
        
        DatePickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-datepicker format='yyyy-MM-dd' placeholder='Enter date'
    [value]=dateValue></ejs-datepicker>`
})
export class AppComponent {
    public dateValue: Date = new Date("05/17/2017");
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Parse and Format Date value based on culture-specific formats

Parse date is a process of converting string value into a date object by using the parseDate method. This method takes two arguments, the string value and DateFormatOptions. Then, returns the date Object.

Format date is a process of converting date object into a formatted string value by using the formatDate method. This method takes two arguments, the date object and DateFormatOptions. Then, returns the formatted string.

The following example demonstrates how to parse the date value and format the date value based on the German culture and dd MMMM yyyy date format. For every value change, the changed date object value will be formatted into a string and the text value of the component will be parsed into a date object. These values are showcased in the example.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'




import { Component, ViewChild } from "@angular/core";
import { DatePickerComponent } from "@syncfusion/ej2-angular-calendars";
import { loadCldr, L10n } from '@syncfusion/ej2-base';
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
import * as detimeZoneNames from './timeZoneNames.json';

loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames);


@Component({
imports: [
        
        DatePickerModule
    ],


standalone: true,
  selector: 'app-root',
  template: `
  <ejs-datepicker id="datepicker" #dateObj locale="de" width="245px" (change)="onChange($event) "format="dd MMMM yyyy"></ejs-datepicker>
  <div class="valuestring">
    <span>Parsed value</span>: <br />
    <span id="parsed"></span>
    <br /><br />
    <span>Formatted value </span>: <br />
    <span id="formatted"></span>
  </div>`
})
export class AppComponent {

  @ViewChild('dateObj')
  public dateObj?: any;

  ngOnInit(): void {
    /*loads the localization text*/
    L10n.load({
      'de': {
        'datepicker': {
          placeholder: 'Wählen Sie ein Datum aus',
          today:'heute'
        }
      }
    });
  }
  constructor() {}

  onChange(args: any) {
    if (args.value) {
      (document.getElementById('parsed') as HTMLElement ).innerText = this.dateObj.globalize.parseDate(this.dateObj.inputElement.value, {
        format: 'dd MMMM yyyy',
        type: 'dateTime',
        skeleton: 'yMd',
      });
      (document.getElementById('formatted') as HTMLElement ).innerText = this.dateObj.globalize.formatDate(this.dateObj.value, {
        format: 'dd MMMM yyyy',
        type: 'dateTime',
        skeleton: 'yMd',
      });
    } else {
      (document.getElementById('parsed') as HTMLElement ).innerText = '';
      (document.getElementById('formatted') as HTMLElement ).innerText = '';
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));