Customization

13 Jun 20232 minutes to read

EJMVC DatePicker appearance can be customized using below listed properties.

Set Dimension

By default DatePicker has standard height and width (height: “30” and width: “143”). You can change this height and width by using Height and Width property respectively.

  • CSHTML
    • @*sets height and width of the datepicker control*@

        @Html.EJ().DatePicker("datePicker").Height("50px").Width("300px")

    Since EJMVC DatePicker is a form control and you can make it as responsive by specifying its width as 100%.

  • CSHTML
    • @*sets width as 100 percentage*@

        @Html.EJ().DatePicker("datePicker").Width("100%")

    You can show or hide the footer of EJMVC DatePicker calendar by using ShowFooter property.

  • CSHTML
    • @*hides the footer in popup calendar*@

    @Html.EJ().DatePicker("datePicker").ShowFooter(false)

    NOTE

    Footer contains the today button to quickly navigate to the current date. By turning off it, you have to select current date by manually.

    Show Popup Button

    EJMVC DatePicker input textbox contains a button to open the DatePicker calendar. You can hide this DatePicker calendar button using ShowPopupButton value as false.

    By hiding this button, you can open the DatePicker by focusing the input textbox element itself.

  • CSHTML
    • @*hides the popup calendar button*@

    @Html.EJ().DatePicker("datePicker").ShowPopupButton(false)

    Show Other Months

    You can show or hide the other month days from EJMVC DatePicker calendar by using ShowOtherMonths property.

  • CSHTML
    • @*hides the days of other months in calendar*@

    @Html.EJ().DatePicker("datePicker").ShowOtherMonths(false)

    Highlight Special Date

    The Essential ASP.NET MVC DatePicker allows you to highlight the special dates in EJMVC DatePicker calendar by using SpecialDates property. It receives the list of “dataSpecial” date fields such as, in which the data should contain the date value, icon CSS class and tooltip as field values with any names.

    Special Date property has following properties,

    Members Description
    Date

    		 It specifies the mapping field of special date
    IconClass

    		 It specifies the mapping field of icon CSS class.
    Tooltip

    		 It specifies the mapping field of tool tip text.
  • CSHTML
    • @*sets the special date in datepicker calendar*@

    @Html.EJ().DatePicker("datePicker").SpecialDates(SpecialDate => { SpecialDate.Add().Date("28/06/2015").IconClass("birthday").Tooltip("John birthday"); })