ejDatePicker

Input field that display the DatePicker calendar as popup to select and set the date value

Syntax

  • javascript
  • $(element).ejDatePicker(options)
    Name Type Description
    options object settings for Date Picker.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    // Create DatePicker
    $("#datepicker").ejDatePicker();
    </script>

    Requires

    • module:jQuery

    • module:ej.globalize.js

    • module:ej.core.js

    • module:ej.datepicker.js

    NOTE

    jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

    Members

    allowEdit boolean

    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.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set allowEdit API during initialization  
            $("#datepicker").ejDatePicker({   allowEdit : true });
    </script>

    allowDrillDown boolean

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

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set allowDrillDown API during initialization  
            $("#datepicker").ejDatePicker({   allowDrillDown : true });
    </script>

    blackoutDates object

    Disable the list of specified date value.

    Default value

    • {}
  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set blackoutDates API during initialization  
            $("#datepicker").ejDatePicker({blackoutDates: [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] });
    </script>

    buttonText string

    Sets the specified text value to the today button in the DatePicker calendar.

    Default Value

    • “Today”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set buttonText API during initialization  
            $("#datepicker").ejDatePicker({  buttonText : "Now" });
    </script>

    cssClass string

    Sets the root CSS class for DatePicker theme, which is used customize.

    Default Value

    • ””

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set cssClass API during initialization  
            $("#datepicker").ejDatePicker({  cssClass: "gradient-lime" });
    </script>

    dateFormat string

    Formats the value of the DatePicker in to the specified date format. If this API is not specified, dateFormat will be set based on the current culture of DatePicker.

    Default Value

    • “MM/dd/yyyy”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set dateFormat API during initialization  
            $("#datepicker").ejDatePicker({  dateFormat: "dd/MM/yyyy" });
    </script>

    dayHeaderFormat string | enum

    Specifies the header format of days in DatePicker calendar. See below to get available Headers options

    Name Description
    Long sets the Min format of day name (like Sunday) in header format DatePicker
    None Removes day header in DatePicker
    Short sets the short format of day name (like Sun) in header in DatePicker
    Min sets the Min format of day name (like su) in header format DatePicker

    Default Value

    • ej.DatePicker.Header.Short

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set dayHeaderFormat API value during initialization  
            $("#datepicker").ejDatePicker({  dayHeaderFormat: ej.DatePicker.Header.Short });
    </script>

    depthLevel string | enum

    Specifies the navigation depth level in DatePicker calendar. This option is not applied when start level view option is lower than depth level view. See below to know available levels in DatePicker Calendar

    Name Description
    Month allow navigation upto month level in DatePicker
    Year allow navigation upto year level in DatePicker
    Decade allow navigation upto decade level in DatePicker
    Century allow navigation upto Century level in DatePicker

    Default Value

    • ””

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set depthLevel API during initialization  
            $("#datepicker").ejDatePicker({  depthLevel: ej.DatePicker.Level.Year });
    </script>

    displayInline boolean

    Allows to embed the DatePicker calendar in the page. Also associates DatePicker with div element instead of input.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set displayInline API during initialization  
            $("#datepicker").ejDatePicker({  displayInline: true });
    </script>

    enableAnimation boolean

    Enables or disables the animation effect with DatePicker calendar.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    // Set the enableAnimation value during initialization.                         
            $("#datepicker").ejDatePicker({  enableAnimation : false });
    </script>

    enabled boolean

    Enable or disable the DatePicker control.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set enabled API during initialization  
            $("#datepicker").ejDatePicker({  enabled: false });
    </script>

    enablePersistence boolean

    Sustain the entire widget model of DatePicker even after form post or browser refresh

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set enablePersistence API during initialization  
            $("#datepicker").ejDatePicker({  enablePersistence: true });
    </script>

    enableRTL boolean

    Displays DatePicker calendar along with DatePicker input field in Right to Left direction.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set enableRTL API during initialization  
            $("#datepicker").ejDatePicker({  enableRTL : true });
    </script>

    enableStrictMode boolean

    Allows to enter valid or invalid date in input textbox and indicate as error if it is invalid value, when this API value is set to true. For false value, invalid date is not allowed to input field and corrected to valid date automatically, even if invalid date is given.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set enableStrictMode API during initialization  
            $("#datepicker").ejDatePicker({  enableStrictMode: true });
    </script>

    fields object

    Used the required fields for special Dates in DatePicker in order to customize the special dates in a calendar.

    Default Value

    • null

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set fields API value during initialization     
    var today = new Date(), year = today.getFullYear(), month = today.getMonth(),
    specialDays = [
               { date: new Date(year, month, 8), tooltip: "In Australia", iconClass: "flags sprite-Australia" },
               { date: new Date(year, month, 21), tooltip: "In France", iconClass: "flags sprite-France" },
               { date: new Date(year, month, 17), tooltip: "In USA", iconClass: "flags sprite-USA" },
               { date: new Date(year, month + 1, 15), tooltip: "In Germany", iconClass: "flags sprite-Germany" },
               { date: new Date(year, month - 1, 22), tooltip: "In India", iconClass: "flags sprite-India" },
    ]
    // declaration
    $("#datepicker").ejDatePicker({ 
    specialDates: specialDays, fields: {date:"date",tooltip:"tooltip",iconClass:"iconClass"}});
    </script>

    fields.date string

    Specifies the specials dates

    fields.iconClass string

    Specifies the icon class to special dates.

    fields.tooltip string

    Specifies the tooltip to special dates.

    fields.cssClass string

    Specifies the CSS class to customize the date.

    headerFormat string

    Specifies the header format to be displayed in the DatePicker calendar.

    Default Value

    • “MMMM yyyy”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set headerFormat API during initialization  
            $("#datepicker").ejDatePicker({  headerFormat : "MMMM yy" });
    </script>

    height string

    Specifies the height of the DatePicker input text.

    Default Value

    • “28px”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set height API during initialization  
            $("#datepicker").ejDatePicker({  height: 35 });
    </script>

    highlightSection string | enum

    HighlightSection is used to highlight currently selected date’s month/week/workdays. See below to get available HighlightSection options

    Name Description
    Month Highlight the month of the currently selected date in DatePicker popup calendar
    Week Highlight the week of the currently selected date in DatePicker popup calendar
    WorkDays Highlight the workdays in a currently selected date's week in DatePicker popup calendar
    None Nothing will be highlighted, remove highlights from DatePicker popup calendar if already exists

    Default Value

    • “none”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set highlightSection API during initialization  
            $("#datepicker").ejDatePicker({  highlightSection: "week" });
    </script>

    highlightWeekend boolean

    Weekend dates will be highlighted when this property is set to true.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set highlightWeekend API during initialization  
            $("#datepicker").ejDatePicker({  highlightWeekend : true });
    </script>

    htmlAttributes object

    Specifies the HTML Attributes of the DatePicker.

    Default Value

    • {}

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //Set HtmlAttributes API during initialization  
            $("#datepicker").ejDatePicker({  htmlAttributes : {required:"required"}});
    </script>

    locale string

    Change the DatePicker calendar and date format based on given culture.

    Default Value

    • “en-US”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set locale API during initialization  
            $("#datepicker").ejDatePicker({  locale: "en-US" });
    </script>

    maxDate string | date

    Specifies the maximum date in the calendar that the user can select.

    Default Value

    • new Date(2099, 11, 31)

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set maxDate value during initialization  
            $("#datepicker").ejDatePicker({  maxDate : new Date("5/30/2015") });
    </script>

    minDate string | date

    Specifies the minimum date in the calendar that the user can select.

    Default Value

    • new Date(1900, 00, 01)

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set minDate value during initialization  
            $("#datepicker").ejDatePicker({  minDate: new Date("5/1/2013") });
    </script>

    readOnly boolean

    Allows to toggles the read only state of the DatePicker. When the widget is readOnly, it doesn’t allow your input.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set readOnly API during initialization  
            $("#datepicker").ejDatePicker({  readOnly : true });
    </script>

    showDisabledRange boolean

    It allow to show/hide the disabled date ranges

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set showDisabledRange API during initialization  
            $("#datepicker").ejDatePicker({  showDisabledRange: false });
    </script>

    showFooter boolean

    It allows to display footer in DatePicker calendar.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set showFooter API during initialization  
            $("#datepicker").ejDatePicker({  showFooter: false });
    </script>

    showOtherMonths boolean

    It allows to display/hides the other months days from the current month calendar in a DatePicker.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set showOtherMonths API during initialization  
            $("#datepicker").ejDatePicker({  showOtherMonths: false });
    </script>

    showPopupButton boolean

    Shows/hides the date icon button at right side of textbox, which is used to open or close the DatePicker calendar popup.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set showPopupButton API during initialization  
            $("#datepicker").ejDatePicker({  showPopupButton: false });
    </script>

    showRoundedCorner boolean

    DatePicker input is displayed with rounded corner when this property is set to true.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set showRoundedCorner API during initialization  
            $("#datepicker").ejDatePicker({  showRoundedCorner : true });
    </script>

    showTooltip boolean

    Used to show the tooltip when hovering on the days in the DatePicker calendar.

    Default Value

    • true

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set tooltip API during initialization  
            $("#datepicker").ejDatePicker({  showTooltip : false });
    </script>

    specialDates object

    Specifies the special dates in DatePicker.

    Default Value

    • null

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set specialDates API value during initialization
    var today = new Date(), year = today.getFullYear(), month = today.getMonth(),
    specialDays = [
               { date: new Date(year, month, 8), tooltip: "In Australia", iconClass: "flags sprite-Australia" },
               { date: new Date(year, month, 21), tooltip: "In France", iconClass: "flags sprite-France" },
               { date: new Date(year, month, 17), tooltip: "In USA", iconClass: "flags sprite-USA" },
               { date: new Date(year, month + 1, 15), tooltip: "In Germany", iconClass: "flags sprite-Germany" },
               { date: new Date(year, month - 1, 22), tooltip: "In India", iconClass: "flags sprite-India" },
    ]
    // declaration
    $("#datepicker").ejDatePicker({specialDates: specialDays});
    </script>

    startDay number

    Specifies the start day of the week in DatePicker calendar.

    Default Value

    • 0

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set startDay API during initialization  
            $("#datepicker").ejDatePicker({  startDay: 2 });
    </script>

    startLevel string | enum

    Specifies the start level view in DatePicker calendar. See below available Levels

    Name Description
    Month Start the view level from month view in DatePicker calendar
    Year Start the view level from year view in DatePicker calendar
    Decade Start the view level from decade view in DatePicker calendar
    Century Start the view level from century view in DatePicker calendar

    Default Value

    • ej.DatePicker.Level.Month

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set startLevel API during initialization  
            $("#datepicker").ejDatePicker({  startLevel: ej.DatePicker.Level.Year });
    </script>

    stepMonths number

    Specifies the number of months to be navigate for one click of next and previous button in a DatePicker Calendar.

    Default Value

    • 1

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set stepMonths API during initialization  
            $("#datepicker").ejDatePicker({  stepMonths: 2 });
    </script>

    tooltipFormat string

    Provides option to customize the tooltip format.

    Default Value

    • “ddd MMM dd yyyy”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set tooltipFormat API during initialization  
            $("#datepicker").ejDatePicker({  tooltipFormat : "dd/MM/yyyy" });
    </script>

    validationMessage object

    Sets the jQuery validation support to DatePicker Date value. See validation

    Default Value

    • null

    Example

  • html
  • <input type="text" id="datepicker" name="datepick" />
    <script>
    //To set validationMessage API during initialization  
            $("#datepicker").ejDatePicker({
      validationRules:{                     
                required:true
            }                       
      validationMessage:{                   
                    required: "Required Date value"
            }
    });
    </script>

    validationRules object

    Sets the jQuery validation custom rules to the DatePicker. see validation

    Default Value

    • null

    Example

  • html
  • <input type="text" id="datepicker" name="datepick" />
    <script>
    //To set validationRules API during initialization  
            $("#datepicker").ejDatePicker({  
      validationRules:{                     
              required:true
            }
    });
    </script>

    value string | date

    sets or returns the current value of DatePicker

    Default Value

    • null

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set the DatePicker value during initialization  
            $("#datepicker").ejDatePicker({  value: new Date("5/5/2014") });
    </script>

    watermarkText string

    Specifies the water mark text to be displayed in input text.

    Default Value

    • “Select date”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set watermarkText during initialization  
            $("#datepicker").ejDatePicker({  watermarkText: "Enter date" });
    </script>

    weekNumber boolean

    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.

    Default Value

    • false

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set weekNumber API during initialization  
            $("#datepicker").ejDatePicker({  weekNumber: true });
    </script>

    width string

    Specifies the width of the DatePicker input text.

    Default Value

    • “160px”

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //To set width API during initialization  
            $("#datepicker").ejDatePicker({  width: 200 });
    </script>

    Methods

    disable()

    Disables the DatePicker control.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.disable(); // disables the datepicker
    </script>
  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // disables the datepicker
    $("#datepicker").ejDatePicker("disable");
    </script>

    enable()

    Enable the DatePicker control, if it is in disabled state.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.enable(); // enables the datepicker
    </script>
  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // enables the datepicker
    $("#datepicker").ejDatePicker("enable");
    </script>

    getValue()

    Returns the current date value in the DatePicker control.

    Returns:

    string

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.getValue(); // returns the date value
    </script>
  • html
  • <input type="text" id="datepicker" />
    <script>
    // returns the date value
    $("#datepicker").ejDatePicker();
    $("#datepicker").ejDatePicker("getValue");
    </script>

    setValue()

    sets the date value for the DatePicker.

    Returns:

    string

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.setValue(new Date()); // sets the date value
    </script>

    hide()

    Close the DatePicker popup, if it is in opened state.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.hide(); // hides the DatePicker popup
    </script>
  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // hides the DatePicker popup
    $("#datepicker").ejDatePicker("hide");
    </script>

    show()

    Opens the DatePicker popup.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // Create DatePicker instance
    var dateObj = $("#datepicker").data("ejDatePicker");
    dateObj.show(); // shows the DatePicker popup
    </script>
  • html
  • <input type="text" id="datepicker" />
    <script>
    $("#datepicker").ejDatePicker();
    // shows the DatePicker popup
    $("#datepicker").ejDatePicker("show");
    </script>

    Events

    beforeClose

    Fires before closing the DatePicker popup.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the DatePicker model.
    type string returns the name of the event.
    events object returns the event parameters from DatePicker.
    element Element returns the DatePicker popup.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //beforeClose event for datepicker
    $("#datepicker").ejDatePicker({
       beforeClose: function (args) {}
    });  
    </script>

    beforeDateCreate

    Fires when each date is created in the DatePicker popup calendar.

    Name Type Description
    model object returns the DatePicker model.
    type string returns the name of the event.
    date object returns the currently created date object.
    element Element returns the current DOM object of the date from the Calendar.
    value string returns the currently created date as string type.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //beforeDateCreate event for datepicker
    $("#datepicker").ejDatePicker({
       beforeDateCreate: function (args) {}
    });  
    </script>

    beforeOpen

    Fires before opening the DatePicker popup.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the DatePicker model.
    type string returns the name of the event.
    events object returns the event parameters from DatePicker.
    element Element returns the DatePicker popup.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //beforeOpen event for datepicker
    $("#datepicker").ejDatePicker({
       beforeOpen: function (args) {}
    });  
    </script>

    change

    Fires when the DatePicker input value is changed.

    Name Type Description
    model object returns the DatePicker model.
    type string returns the name of the event.
    value string returns the DatePicker input value.
    prevDate string returns the previously selected value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //change event for datepicker
    $("#datepicker").ejDatePicker({
       change: function (args) {}
    });  
    </script>

    close

    Fires when DatePicker popup is closed.

    Name Type Description
    date object returns the current date object.
    model object returns the DatePicker model.
    type string returns the name of the event.
    value string returns the current date value.
    prevDate string returns the previously selected value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //close event for datepicker
    $("#datepicker").ejDatePicker({
       close: function (args) {}
    });   
    </script>

    create

    Fires when the DatePicker is created successfully.

    Name Type Description
    model object returns the DatePicker model.
    type string returns the name of the event.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //create event for datepicker
    $("#datepicker").ejDatePicker({
       create: function (args) {}
    });
    </script>

    destroy

    Fires when the DatePicker is destroyed successfully.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the DatePicker model.
    type string returns the name of the event.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //destroy event for datepicker
    $("#datepicker").ejDatePicker({
       destroy: function (args) {}
    }); 
    </script>

    focusIn

    Fires when DatePicker input gets focus.

    Name Type Description
    model object returns the DatePicker model.
    type string returns the name of the event.
    value string returns the currently selected date value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //focusIn event for datepicker
    $("#datepicker").ejDatePicker({
       focusIn: function (args) {}
    }); 
    </script>

    focusOut

    Fires when DatePicker input loses the focus.

    Name Type Description
    model object returns the DatePicker model.
    type string returns the name of the event.
    value string returns the currently selected date value.
    prevDate string returns the previously selected date value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //focusOut event for datepicker
    $("#datepicker").ejDatePicker({
       focusOut: function (args) {}
    });
    </script>

    navigate

    Fires when calender view navigates to month/year/decade/century.

    Name Type Description
    date object returns the current date object.
    model object returns the DatePicker model.
    navigateFrom string returns the previous view state of calendar.
    navigateTo string returns the current view state of calendar.
    type string returns the name of the event
    value string returns the current date value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //navigate event for datepicker
    $("#datepicker").ejDatePicker({
       navigate: function (args) {}
    });  
    </script>

    open

    Fires when DatePicker popup is opened.

    Name Type Description
    date object returns the current date object.
    model object returns the DatePicker model.
    type string returns the name of the event
    value string returns the current date value.
    prevDate string returns the previously selected value.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //open event for datepicker
    $("#datepicker").ejDatePicker({
       open: function (args) {}
    });  
    </script>

    select

    Fires when a date is selected from the DatePicker popup.

    Name Type Description
    date object returns the selected date object.
    model object returns the DatePicker model.
    type string returns the name of the event.
    value string returns the current date value.
    prevDate string returns the previously selected value.
    isSpecialDay string returns whether the currently selected date is special date or not.

    Example

  • html
  • <input type="text" id="datepicker" />
    <script>
    //select event for datepicker
    $("#datepicker").ejDatePicker({
       select: function (args) {}
    }); 
    </script>