Customization

6 Feb 20188 minutes to read

DatePicker provides more flexible way to customize the below listed properties.

Set Dimension

By default DatePicker has standard height and width (height: ‘30px’ and width: ’143px’). You can change this height and width by using height and width property respectively.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                height: '50px', // sets height as 50 pixel

                width: '300px'// sets width as 300 pixel

            });

        });

Mostly dimension plays a vital role in web application to get responsive layout in all devices. DatePicker is a form control and you can make it as responsive by specifying its width as “100%”.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                width: '100%'// sets width as 100 percentage

            });

        });

Show Footer

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

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                showFooter: false // hides the footer in DatePicker calendar

            });

        });

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

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

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                showPopupButton: false // hides the DatePicker calendar button

            });

        });

Show Other Months

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

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                showOtherMonths: false // hides the days of other months in DatePicker calendar

            });

        });

Highlight Special Date

DatePicker allows you to highlight the special dates in DatePicker calendar by using specialDates property. It receives the array of JSON data, in which the data should contain the date value, icon CSS class and tooltip as field values with any names.

JAVASCRIPT

var data = [{ specialdate: "28/06/2015", customClass: "birthday", tooltip: "xxx birthday" }]

And you can map those above field names to DatePicker by using fields property, which holds following members.

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.

JAVASCRIPT

// assign special date values in local variable data

    var data = [{ specialdate: "28/06/2015", customClass: "birthday", tooltip: "xxx birthday" }]


    $(function () {

        // creates DatePicker from input

        $("#datePicker").ejDatePicker({

            specialDates: data, // date values in data variable assigned to specialDates

            fields: { date: "specialDate", iconCSS: "customClass", tooltip: "toolTip" }

            // mapping special date fields

        });

    });

Enable RTL

You can displays DatePicker calendar along with DatePicker input field in Right to Left direction.You can utilize this option by make use of enableRTL property.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

               enableRTL : true //DatePicker input field in Right to Left direction.
            });

        });

Show Highlight Section

HighlightSection is used to highlight currently selected date’s month/week/workdays. See below to get available HighlightSection options.You can utilize this option by make use of highlightSection property.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                highlightSection: "week" // hides the days of other months in DatePicker calendar

            });

        });

highlightWeekend

highlightWeekend is used to Weekend dates will be highlighted when this property is set to true. See below to get available highlightWeekend options.You can utilize this option by make use of highlightWeekend property.

JAVASCRIPT

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                highlightWeekend:true // highlight the weekend in DatePicker calendar

            });

        });

Rounded Corners

You can make use of showRoundedCorner property in order to add rounded borders to the input and popup elements. By default, in DatePicker this will be disabled state we can enable this by setting true to this API.

// creates DatePicker and setting rounded corner dynamically

HTML

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

        dateObj = $("#datepicker").ejDatePicker("instance");

        dateObj.option("showRoundedCorner", true);

Show Disable Ranges

You can make use of ShowDisableRanges property its used to allow show/hide the disabled date ranges

HTML

$(function () {

            // creates DatePicker from input

            $("#datePicker").ejDatePicker({

                showDisabledRange: false  // hides the disable ranges in DatePicker calendar

            });

        });