Miscellaneous

12 Jun 20232 minutes to read

Start Day

By default EJMVC DatePicker calendar starts with “Sunday” and ends with “Monday”. You can redefine this start day by using StartDay property.

Refer below code to start Wednesday as start day.

CSHTML

/*ej-Tag Helper code to render DatePicker*/

        @*sets start day as Wednesday in calendar*@

     <ej-date-picker id="datepick" start-day="3"></ej-date-picker>

CSHTML

/*Razor code to render DatePicker*/

         @{Html.EJ().DatePicker("datepick").StartDay(3).Render(); }

NOTE

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

Step Months

The EJMVC DatePicker calendar allows you to quick navigate back and forth from one month to previous or next month by clicking the arrow button. By default it is navigate one by one month. You can also navigate by skipping months in odd or even or any count by using StepMonths property.

CSHTML

/*ej-Tag Helper code to render DatePicker*/

        @*skips the one months from current month(July to Sept to Nov)*@

         <ej-date-picker id="datepick" step-months="2"></ej-date-picker>

CSHTML

/*Razor code to render DatePicker*/

         @{Html.EJ().DatePicker("datepick").StepMonths(2).Render(); }

Read Only

You can make EJMVC DatePicker as read only by setting ReadOnly property as true. It allows only to read the value and it cannot be changed by interaction.

CSHTML

/*ej-Tag Helper code to render DatePicker*/

        @*sets DatePicker as read only*@

        <ej-date-picker id="datepick" read-only="true"></ej-date-picker>

CSHTML

/*Razor code to render DatePicker*/

         @{Html.EJ().DatePicker("datepick").ReadOnly(true).Render(); }

Enable or Disable

You can enable or disable the EJMVC DatePicker textbox by using Enabled property. In inline mode DatePicker calendar also gets enabled or disabled.

CSHTML

/*ej-Tag Helper code to render DatePicker*/

        @*disables the DatePicker textbox*@

         <ej-date-picker id="datepick" enabled="false"></ej-date-picker>

CSHTML

/*Razor code to render DatePicker*/

        @{Html.EJ().DatePicker("datepick").Enabled(false).Render(); }