ejDateTimePicker
26 Mar 201924 minutes to read
The DateTimePicker control is used to input the date and time with a specific format. It combines the DatePicker and TimePicker controls so that users can select the date and time with their desired format.
Syntax
$(element).ejDateTimePicker(options)
Name | Type | Description |
---|---|---|
options | object | settings for Date Picker. |
Example
<input type="text" id="datetime" />
<script>
// Create DateTimePicker
$("#datetime").ejDateTimePicker();
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.globalize.js
-
module:ej.cultures.en-US.min.js
-
module:ej.datetimepicker.js
-
module:ej.datepicker.js
-
module:ej.timepicker.js
-
module:ej.scroller.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 DateTimePicker input field directly. By setting false to this API, You can only pick the date and time values from DateTimePicker popup.
Default Value
- true
Example
<input type="text" id="datetimepicker" />
<script>
//To set allowEdit API during initialization to deny edit
$("#datetimepicker").ejDateTimePicker({ allowEdit : false });
</script>
buttonText object
Displays the custom text for the buttons inside the DateTimePicker popup. when the culture value changed, we can change the buttons text based on the culture.
Default Value
- { today: “Today”, timeNow: “Time Now”, done: “Done”, timeTitle: “Time” }
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ buttonText: { done: "做过" } });
</script>
buttonText.done string
Sets the text for the Done button inside the datetime popup.
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ buttonText: { done: "Done" }});
</script>
buttonText.timeNow string
Sets the text for the Now button inside the datetime popup.
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ buttonText: { timeNow: "Current Time" }});
</script>
buttonText.timeTitle string
Sets the header text for the Time dropdown.
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ buttonText: { timeTitle: "Time" }});
</script>
buttonText.today string
Sets the text for the Today button inside the datetime popup.
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ buttonText: { today: "Today" }});
</script>
blackoutDates object
Disable the list of specified date value.
Default value
- {}
<input type="text" id="datetimepicker" />
<script>
//To set blackoutDates API during initialization.
$("#datetimepicker").ejDateTimePicker({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>
cssClass string
Set the root class for DateTimePicker theme. This cssClass API helps to use custom skinning option for DateTimePicker control.
Default Value
- ””
Example
<input type="text" id="datetime" />
<script>
//To set cssClass API during initialization
$("#datetime").ejDateTimePicker({ cssClass: "gradient-lime" });
</script>
dateTimeFormat string
Defines the datetime format displayed in the DateTimePicker. The value should be a combination of date format and time format.
Default Value
- “M/d/yyyy h:mm tt”
Example
<input type="text" id="datetime" />
<script>
//To set dateTimeFormat API during initialization
$("#datetime").ejDateTimePicker({ dateTimeFormat: "d/M/yyyy tt h:mm" });
</script>
dayHeaderFormat string | enum
Specifies the header format of the datepicker inside the DateTimePicker popup. See DatePicker.Header
Default Value
- ej.DatePicker.Header.Short
Example
<input type="text" id="datetime" />
<script>
//To set dayHeaderFormat API during initialization
$("#datetime").ejDateTimePicker({ dayHeaderFormat: "short" });
</script>
depthLevel enum
Specifies the navigation depth level in DatePicker calendar inside DateTimePicker popup. This option is not applied when start level view option is lower than depth level view. See ej.DatePicker.Level
Default Value
- ””
Example
<input type="text" id="datetime" />
<script>
//To set depthLevel API during initialization
$("#datetime").ejDateTimePicker({ depthLevel: "decade" });
</script>
disableTimeRanges object
Specifies the list of time range to be disabled.
Default value
- {}
Example
<input type="text" id="datetimepicker" />
<script>
// Set the disableTimeRanges value during initialization.
$("#datetimepicker").ejDateTimePicker({ disableTimeRanges: [{ startTime: "3:00 AM", endTime: "6:00 AM" },
{ startTime: "1:00 PM", endTime: "3:00 PM" },
{ startTime: "8:00 PM", endTime: "10:00 PM" }] });
</script>
enableAnimation boolean
Enable or disable the animation effect in DateTimePicker.
Default Value
- true
Example
<input type="text" id="datetime" />
<script>
// Set the enableAnimation value during initialization.
$("#datetime").ejDateTimePicker({ enableAnimation : false });
</script>
enabled boolean
When this property is set to false, it disables the DateTimePicker control.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set enabled API during initialization
$("#datetime").ejDateTimePicker({ enabled: true });
</script>
enablePersistence boolean
Enables or disables the state maintenance of DateTimePicker.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set enablePersistence API during initialization
$("#datetime").ejDateTimePicker({ enablePersistence: true });
</script>
enableRTL boolean
Sets the DateTimePicker direction as right to left alignment.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set enableRTL API during initialization
$("#datetime").ejDateTimePicker({ enableRTL: true });
</script>
enableStrictMode boolean
When enableStrictMode true it allows the value outside of the range also but it highlights the textbox with error class, otherwise it internally changed to the correct value.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set enableStrictMode API during initialization
$("#datetime").ejDateTimePicker({ enableStrictMode: true });
</script>
headerFormat string
Specifies the header format to be displayed in the DatePicker calendar inside the DateTimePicker popup.
Default Value
- “MMMM yyyy”
Example
<input type="text" id="datetime" />
<script>
//To set headerFormat API during initialization
$("#datetime").ejDateTimePicker({ headerFormat: "MM - yyyy" });
</script>
height string | number
Defines the height of the DateTimePicker textbox.
Default Value
- 30
Example
<input type="text" id="datetime" />
<script>
//To set height API during initialization
$("#datetime").ejDateTimePicker({ height: 40 });
</script>
htmlAttributes object
Specifies the HTML Attributes of the ejDateTimePicker
Default Value
- {}
Example
<input type="text" id="datetime" />
<script>
//To Set HtmlAttributes API during initialization
$("#datetime").ejDateTimePicker({ htmlAttributes : {required:"required"}});
</script>
interval number
Sets the time interval between the two adjacent time values in the time popup.
Default Value
- 30
Example
<input type="text" id="datetime" />
<script>
//To set interval API during initialization
$("#datetime").ejDateTimePicker({ interval: 60 });
</script>
locale string
Defines the localization culture for DateTimePicker.
Default Value
- “en-US”
Example
<input type="text" id="datetime" />
<script>
//To set locale API during initialization
$("#datetime").ejDateTimePicker({ locale: "en-US" });
</script>
maxDateTime string | date
Sets the maximum value to the DateTimePicker. Beyond the maximum value an error class is added to the wrapper element when we set true to enableStrictMode.
Default Value
- new Date(“12/31/2099 11:59:59 PM”)
Example
<input type="text" id="datetime" />
<script>
//To set maxDateTime API during initialization
$("#datetime").ejDateTimePicker({ maxDateTime: new Date("12/10/2050 8:00:00 PM") });
</script>
minDateTime string | date
Sets the minimum value to the DateTimePicker. Behind the minimum value an error class is added to the wrapper element.
Default Value
- new Date(“1/1/1900 12:00:00 AM”)
Example
<input type="text" id="datetime" />
<script>
//To set minDateTime API during initialization
$("#datetime").ejDateTimePicker({ minDateTime: new Date("5/5/2010 12:00:00 AM") });
</script>
popupPosition string | enum
Specifies the popup position of DateTimePicker.See below to know available popup positions
Name | Description |
---|---|
Bottom | Opens the DateTimePicker popup below to the DateTimePicker input box |
Top | Opens the DateTimePicker popup above to the DateTimePicker input box |
Default value
- ej.PopupPosition.Bottom
Example
<input type="text" id="datetime" />
<script>
//To set popupPosition API during initialization
$("#datetime").ejDateTimePicker({ popupPosition: "bottom" });
</script>
readOnly boolean
Indicates that the DateTimePicker value can only be read and can’t change.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set readOnly API during initialization
$("#datetime").ejDateTimePicker({ readOnly: true });
</script>
showOtherMonths boolean
It allows showing days in other months of DatePicker calendar inside the DateTimePicker popup.
Default Value
- true
Example
<input type="text" id="datetime" />
<script>
//To set showOtherMonths API during initialization
$("#datetime").ejDateTimePicker({ showOtherMonths: false });
</script>
showPopupButton boolean
Shows or hides the arrow button from the DateTimePicker textbox. When the button disabled, the DateTimePicker popup opens while focus in the textbox and hides while focus out from the textbox.
Default Value
- true
Example
<input type="text" id="datetime" />
<script>
//To set showPopupButton API during initialization
$("#datetime").ejDateTimePicker({ showPopupButton: false });
</script>
showRoundedCorner boolean
Changes the sharped edges into rounded corner for the DateTimePicker textbox and popup.
Default Value
- false
Example
<input type="text" id="datetime" />
<script>
//To set showRoundedCorner API during initialization
$("#datetime").ejDateTimePicker({ showRoundedCorner: true });
</script>
specialDates object
Specifies the special dates in DateTimePicker.
Default Value
- null
Example
<input type="text" id="datetimepicker" />
<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
$("#datetimepicker").ejDateTimePicker({specialDates: specialDays});
</script>
startDay number
Specifies the start day of the week in datepicker inside the DateTimePicker popup.
Default Value
- 1
Example
<input type="text" id="datetime" />
<script>
//To set startDay API during initialization
$("#datetime").ejDateTimePicker({ startDay: 2 });
</script>
startLevel string | enum
Specifies the start level view in datepicker inside the DateTimePicker popup. See DatePicker.Level
Default Value
- ej.DatePicker.Level.Month or “month”
Example
<input type="text" id="datetime" />
<script>
//To set startLevel API during initialization
$("#datetime").ejDateTimePicker({ startLevel:ej.DatePicker.Level.Year });
</script>
stepMonths number
Specifies the number of months to navigate at one click of next and previous button in datepicker inside the DateTimePicker popup.
Default Value
- 1
Example
<input type="text" id="datetime" />
<script>
//To set stepMonths API during initialization
$("#datetime").ejDateTimePicker({ stepMonths: 2 });
</script>
timeDisplayFormat string
Defines the time format displayed in the time dropdown inside the DateTimePicker popup.
Default Value
- “h:mm tt”
Example
<input type="text" id="datetime" />
<script>
//To set timeDisplayFormat API during initialization
$("#datetime").ejDateTimePicker({ timeDisplayFormat: "HH:mm" });
</script>
timeDrillDown object
We can drill down up to time interval on selected date with meridian details.
Default Value
- { enabled: false, interval: 5, showMeridian: false, autoClose: true }
Example
<input type="text" id="datetime" />
<script>
//To set timeDrillDown API during initialization
$("#datetime").ejDateTimePicker({ timeDrillDown: { enabled: true } });
</script>
timeDrillDown.enabled boolean
This is the field to show/hide the timeDrillDown in DateTimePicker.
Example
<input type="text" id="datetime" />
<script>
//To set timeDrillDown API during initialization
$("#datetime").ejDateTimePicker({ timeDrillDown: { enabled: true }});
</script>
timeDrillDown.interval number
Sets the interval time of minutes on selected date.
Example
<input type="text" id="datetime" />
<script>
//To set timeDrillDown API during initialization
$("#datetime").ejDateTimePicker({ timeDrillDown: { interval: 10 }});
</script>
timeDrillDown.showMeridian boolean
Allows the user to show or hide the meridian with time in DateTimePicker.
Example
<input type="text" id="datetime" />
<script>
//To set timeDrillDown API during initialization
$("#datetime").ejDateTimePicker({ timeDrillDown: { showMeridian: true }});
</script>
timeDrillDown.autoClose boolean
After choosing the time, the popup will close automatically if we set it as true, otherwise we focus out the DateTimePicker or choose timeNow button for closing the popup.
Example
<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization
$("#datetime").ejDateTimePicker({ timeDrillDown: { autoClose: true }});
</script>
timePopupWidth string | number
Defines the width of the time dropdown inside the DateTimePicker popup.
Default Value
- 100
Example
<input type="text" id="datetime" />
<script>
//To set timePopupWidth API during initialization
$("#datetime").ejDateTimePicker({ timePopupWidth: 150 });
</script>
validationMessage object
Set the jQuery validation error message in DateTimePicker.
Default Value
- null
Example
<input type="text" id="datetime" name="datetime" />
<script>
//To set validationMessage API during initialization
$("#datetime").ejDateTimePicker({
validationRules:{
required:true
},
validationMessage: {
required: "Required DateTime value"
}
});
</script>
validationRules object
Set the jQuery validation rules in DateTimePicker.
Default Value
- null
Example
<input type="text" id="datetime" name="datetime" />
<script>
//To set validationRules API during initialization
$("#datetime").ejDateTimePicker({
validationRules:{
required:true
}
});
</script>
value string | date
Sets the DateTime value to the control.
Default Value
- ””
Example
<input type="text" id="datetime" />
<script>
//To set value API during initialization
$("#datetime").ejDateTimePicker({ value:"6/2/2014 6:00 AM" });
</script>
watermarkText string
Specifies the water mark text to be displayed in input text.
Default Value
- “Select date and time”
Example
<input type="text" id="datetime" />
<script>
//To set watermarkText during initialization
$("#datetime").ejDateTimePicker({ watermarkText: "select value" });
</script>
width string | number
Defines the width of the DateTimePicker textbox.
Default Value
- 143
Example
<input type="text" id="datetime" />
<script>
//To set width API during initialization
$("#datetime").ejDateTimePicker({ width: 210 });
</script>
Methods
disable()
Disables the DateTimePicker control.
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.disable(); // disables the DateTimePicker
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// disables the DateTimePicker
$("#datetime").ejDateTimePicker("disable");
</script>
enable()
Enables the DateTimePicker control.
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.enable(); // enables the DateTimePicker
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// enables the DateTimePicker
$("#datetime").ejDateTimePicker("enable");
</script>
getValue()
Returns the current datetime value in the DateTimePicker.
####Returns:
string
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.getValue(); // returns the datetime value
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// returns the datetime value
$("#datetime").ejDateTimePicker("getValue");
</script>
hide()
Hides or closes the DateTimePicker popup.
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.hide(); // hides the datetime popup
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// hides the datetime popup
$("#datetime").ejDateTimePicker("hide");
</script>
setCurrentDateTime()
Updates the current system date value and time value to the DateTimePicker.
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.setCurrentDateTime(); // updates the current datetime value
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// updates the current datetime value
$("#datetime").ejDateTimePicker("setCurrentDateTime");
</script>
show()
Shows or opens the DateTimePicker popup.
Example
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.show(); // opens the datetime popup
</script>
<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// opens the datetime popup
$("#datetime").ejDateTimePicker("show");
</script>
Events
beforeClose
Fires before the datetime popup closed in the DateTimePicker.
Name | Type | Description |
---|---|---|
cancel | boolean | Set to true when the event has to be canceled, else false. |
model |
|
returns the DateTimePicker model. |
type | string | returns the name of the event. |
events | object | returns the event parameters from DateTimePicker. |
element | Element | returns the DateTimePicker popup. |
Example
<input type="text" id="datetime" />
<script>
//popup before close event for DateTimePicker
$("#datetime").ejDateTimePicker({
beforeClose: function (args) {}
});
</script>
beforeOpen
Fires before the datetime popup open in the DateTimePicker.
Name | Type | Description |
---|---|---|
cancel | boolean | Set to true when the event has to be canceled, else false. |
model |
|
returns the DateTimePicker model. |
type | string | returns the name of the event. |
events | object | returns the event parameters from DateTimePicker. |
element | Element | returns the DateTimePicker popup. |
Example
<input type="text" id="datetime" />
<script>
//popup before open event for DateTimePicker
$("#datetime").ejDateTimePicker({
beforeOpen: function (args) {}
});
</script>
change
Fires when the datetime value changed in the DateTimePicker textbox.
Name | Type | Description |
---|---|---|
model |
|
returns the TimePicker model |
type | string | returns the name of the event |
isValidState | boolean | returns the current value is valid or not |
value | string | returns the modified datetime value |
prevDateTime | string | returns the previously selected date time value |
isInteraction | boolean | returns true if change event triggered by interaction, otherwise returns false |
Example
<input type="text" id="datetime" />
<script>
//change event for DateTimePicker
$("#datetime").ejDateTimePicker({
change: function (args) {}
});
</script>
close
Fires when DateTimePicker popup closes.
Name | Type | Description |
---|---|---|
model |
|
returns the TimePicker model |
type | string | returns the name of the event |
value | string | returns the modified datetime value |
prevDateTime | string | returns the previously selected date time value |
Example
<input type="text" id="datetime" />
<script>
//close event for DateTimePicker
$("#datetime").ejDateTimePicker({
close: function (args) {}
});
</script>
create
Fires after DateTimePicker control is created.
Name | Type | Description |
---|---|---|
model |
|
returns the DateTimePicker model |
type | string | returns the name of the event |
Example
<input type="text" id="datetime" />
<script>
//create event for DateTimePicker
$("#datetime").ejDateTimePicker({
create: function (args) {}
});
</script>
destroy
Fires when the DateTimePicker is destroyed successfully
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the DateTimePicker model |
type | string | returns the name of the event |
Example
<input type="text" id="datetime" />
<script>
//destroy event for DateTimePicker
$("#datetime").ejDateTimePicker({
destroy: function (args) {}
});
</script>
focusIn
Fires when the focus-in happens in the DateTimePicker textbox.
Name | Type | Description |
---|---|---|
model |
|
returns the TimePicker model |
type | string | returns the name of the event |
value | string | returns the datetime value, which is in text box |
Example
<input type="text" id="datetime" />
<script>
//focusIn event for DateTimePicker
$("#datetime").ejDateTimePicker({
focusIn: function (args) {}
});
</script>
focusOut
Fires when the focus-out happens in the DateTimePicker textbox.
Name | Type | Description |
---|---|---|
model |
|
returns the TimePicker model |
type | string | returns the name of the event |
value | string | returns the datetime value, which is in text box |
Example
<input type="text" id="datetime" />
<script>
//focusOut event for DateTimePicker
$("#datetime").ejDateTimePicker({
focusOut: function (args) {}
});
</script>
open
Fires when DateTimePicker popup opens.
Name | Type | Description |
---|---|---|
model |
|
returns the TimePicker model |
type | string | returns the name of the event |
value | string | returns the modified datetime value |
prevDateTime | string | returns the previously selected date time value |
Example
<input type="text" id="datetime" />
<script>
//open event for DateTimePicker
$("#datetime").ejDateTimePicker({
open: function (args) {}
});
</script>