13 Oct 20174 minutes to read

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

The day of the month between 1 and 31

"1" to "31"


The day of the month with leading zero if required.

"01" to "31"


Abbreviated day name.

"Mon" to "Sun"


The full day name

"Monday" to "Sunday"


The month of the year between 1 - 12

"1" to "12"


The month of the year with leading zero if required

"01" to "12"


Abbreviated month name

"Jan" to "Dec"


The full month name

"January" to "December"


The year as a two-digit number

"99" or "08"


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 of EJMVC DatePicker component. You can change the date format by using DateFormat property

The standard formats are listed as follows

Format Name





d M, y


d MM, y


dddd, d MMMM, yy



By default en-US culture Date format is “M/d/yyyy”.

  • cshtml
  • /*ej-Tag Helper code to render DatePicker*/
            @*sets en-US culture with specified date format*@
            <ej-date-picker id="datePicker" locale="en-US" value="DateTime.Now" date-format="yyyy/dd/MM"></ej-date-picker>
  • cshtml
  • /*Razor code to render DatePicker*/
             @{ Html.EJ().DatePicker("datePicker").Locale("en-US").Value(DateTime.Now).DateFormat("yyyy/dd/MM").Render();}


    To render the DatePicker Control you can use either Razor or Tag helper code as given in the above code snippet.

    To get the culture and date format of DatePicker, refer the below code example

  • js
  • // create instance for datePicker
            // only after control creation we can get dateObj otherwise it throws exception
            var dateObj = $("#datePicker").ejDatePicker('instance');
            dateObj.option('locale'); //returns the culture in string
            dateObj.option('dateFormat');// returns the date Format in string


    by default date format is based on culture specific. You have to refer the required culture specific files in layout page of your web application in order to localize DatePicker and customize different format for that culture.

    Header Format

    EJMVC 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.

  • cshtml
  • /*ej-Tag Helper code to render DatePicker*/
            @*sets the selected header format to display in header*@
            <ej-date-picker id="datepick" header-format="yyyy MMMM"></ej-date-picker>
  • cshtml
  • /*Razor code to render DatePicker*/
            @{ Html.EJ().DatePicker("datepick").HeaderFormat("yyyy MMMM").Render();}

    Day Header

    Day header determines the days name to be displayed in terms of short, medium and long in EJMVC DatePicker calendar by using DayHeaderFormat property. Also the DatePicker calendar size varies with this specified values.

  • cshtml
  • /*ej-Tag Helper code to render DatePicker*/
                @*sets the day header as long*@
              <ej-date-picker id="datepick" day-header-format="Long"></ej-date-picker>
  • cshtml
  • /*Razor code to render DatePicker*/
            @{ Html.EJ().DatePicker("datepick").DayHeaderFormat(Header.Long).Render();}

    Tooltip with Formatting

    The EJMVC 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.

  • cshtml
  • /*ej-Tag Helper code to render DatePicker*/
        @*sets and shows tooltip on hovering date on calendar*@
          <ej-date-picker id="datepick" show-tooltip="true" tooltip-format="dd/MM/yy"></ej-date-picker>
  • cshtml
  • /*Razor code to render DatePicker*/
            @{ Html.EJ().DatePicker("datepick").ShowTooltip(true).TooltipFormat("dd/MM/yy").Render();}