Customization

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
    
                });
    
            });

    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
    
                });
    
            });