ejDatePicker

31 Jan 201924 minutes to read

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>