Formatting

Formatting is the way of displaying the date or number as string in some standard format which is based on culture specific or user need.

Below table shows the patterns to format date value.

Format Pattern Description Result
d

The day of the month between 1 and 31.  

"1"  to "31"

dd

The day of the month with leading zero if required.

"01" to "31"

ddd

Abbreviated day name.

"Mon" to "Sun"

dddd

The full day name

"Monday" to "Sunday"







M

The month of the year between 1 - 12

"1" to "12"

MM

The month of the year with leading zero if required

"01" to "12"

MMM

Abbreviated month name

"Jan" to "Dec"

MMMM

The full month name

"January" to "December"







yy

The year as a two-digit number

"99" or "08"

yyyy

The full four digit year

"1999" or "2008"

Date Format

Each culture has some specific date format. Date format defines a format or structure of the displayed date in the textbox. You can change the date format by using dateFormat property

The standard formats are listed as follows

Format Name

Formats

default

"M/d/yyyy"

Short

“d M, y”

Medium

“d MM, y”

Full

“dddd, d MMMM, yy”

UTC

“yyyy-MM-dd”

Header Format

DatePicker calendar consists of header, day header, days and footer section. In which header section shows the current view of DatePicker calendar by displaying the selected day or month or year. It can be formatted as like date format by using headerFormat property.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(ngModel)]="value" headerFormat="yyyy MMMM"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
      value: string;
      constructor() {
        this.value = Date();
      }
    }

    Tooltip with Formatting

    DatePicker calendar shows tooltip on hovering the date by specifying the formatted date of hovered date. Its helps you to get clear view about the date going to select. You can show or hide this tooltip option by using showTooltip property.

    You can also change the format of tooltip by using “tooltipFormat” property. Below codes example allows to show tooltip and format its value.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(ngModel)]="value"  [(showTooltip)]="show" tooltipFormat="MM/dd/yy"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
      value: string;
      show: boolean;
      constructor() {
        this.value = Date();
        this.show = false;
      }
    }