Search results

Parse and Format Date value based on Culture and Format in Angular DatePicker component

16 Nov 2021 / 2 minutes to read

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
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({
  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>Fromatted value </span>: <br />
    <span id="formatted"></span>
    <br /><br />
  </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) {
    if (args.value) {
      document.getElementById('parsed').innerText = this.dateObj.globalize.parseDate(this.dateObj.inputElement.value, {
        format: 'dd MMMM yyyy',
        type: 'dateTime',
        skeleton: 'yMd',
      });
      document.getElementById('formatted').innerText = this.dateObj.globalize.formatDate(this.dateObj.value, {
        format: 'dd MMMM yyyy',
        type: 'dateTime',
        skeleton: 'yMd',
      });
    } else {
      document.getElementById('parsed').innerText = '';
      document.getElementById('formatted').innerText = '';
    }
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#container {
    margin-left: 100px;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 650px;
    margin: 0 auto;
}
#calendar {
display: inline-block;
}
.valuestring{
display: inline-block;
background:#f3f3f3;
border:1px solid #c6c4c43f;
padding:10px;
}
.valuestring{
    float:right;
}