Miscellaneous

22 Jan 20195 minutes to read

Start Day

By default 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.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                startDay: 3 // sets start day as Wednesday in DatePicker calendar

            });

        });

Step Months

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’s navigate one by one month. You can also navigate by skipping months in odd or even or any count by using stepMonths property.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                stepMonths: 2 // skips the one months from current month(July to Sept to Nov)

            });

        });

Read Only

You can make DatePicker as read only by setting readOnly property as true. It allows only to read the value and it can’t be changed by interaction.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                readOnly: true //sets DatePicker as read only

            });

        });

Enable or Disable

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

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                enabled: false //disables the DatePicker textbox

            });

        });

Week Number

You can allows to embed a new column with the calendar in the popup, which will display the week number of every week in a calendar year. You can utilize this option by make use of weekNumber property.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                weekNumber: true //displays the week number 

            });

        });

allowEdit

The allowEdit property of datepicker used to allow or restrict the editing in DatePicker input field directly. By setting false to this API, You can only pick the date from DatePicker popup.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

               allowEdit : true 

            });

        });

allowDrillDown

The allowDrillDown property of the DatePicker control allow or restrict the drill down to multiple levels of view (month/year/decade) in DatePicker calendar

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

               allowDrillDown: true  

            });

        });

setValue

The setValue() method in the DatePicker control allows the user to set any date value in DatePicker calendar.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker();

            // Create DatePicker instance

            var dateObj = $("#datepicker").data("ejDatePicker");

            dateObj.setValue(new Date()); // sets the date value

        });