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

JAVASCRIPT

$(element).ejDateTimePicker(options)

Name	Type	Description
options	object	settings for Date Picker.

Example

HTML

<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

HTML

<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

HTML

<input type="text" id="datetime" />
<script>
//To set buttonText API during initialization  
        $("#datetime").ejDateTimePicker({  buttonText: { done: "&#20570;&#36807;" } });
</script>

buttonText.done string

Sets the text for the Done button inside the datetime popup.

Example

HTML

<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

HTML

<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

HTML

<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

HTML

<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

• {}

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<input type="text" id="datetime" />
<script>
//To set width API during initialization  
        $("#datetime").ejDateTimePicker({  width: 210 });
</script>

Methods

disable()

Disables the DateTimePicker control.

Example

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.disable(); // disables the DateTimePicker
</script>

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// disables the DateTimePicker
$("#datetime").ejDateTimePicker("disable");
</script>

enable()

Enables the DateTimePicker control.

Example

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.enable(); // enables the DateTimePicker
</script>

HTML

<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

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.getValue(); // returns the datetime value
</script>

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// returns the datetime value
$("#datetime").ejDateTimePicker("getValue");
</script>

hide()

Hides or closes the DateTimePicker popup.

Example

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.hide(); // hides the datetime popup
</script>

HTML

<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

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.setCurrentDateTime(); // updates the current datetime value
</script>

HTML

<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

HTML

<input type="text" id="datetime" />
<script>
$("#datetime").ejDateTimePicker();
// Create DateTimePicker instance
var datetimeObj = $("#datetime").data("ejDateTimePicker");
datetimeObj.show(); // opens the datetime popup
</script>

HTML

<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	object	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

HTML

<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	object	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

HTML

<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	object	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

HTML

<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	object	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

HTML

<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	object	returns the DateTimePicker model
type	string	returns the name of the event

Example

HTML

<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	object	returns the DateTimePicker model
type	string	returns the name of the event

Example

HTML

<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	object	returns the TimePicker model
type	string	returns the name of the event
value	string	returns the datetime value, which is in text box

Example

HTML

<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	object	returns the TimePicker model
type	string	returns the name of the event
value	string	returns the datetime value, which is in text box

Example

HTML

<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	object	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

HTML

<input type="text" id="datetime" />
<script>
//open event for DateTimePicker
$("#datetime").ejDateTimePicker({
   open: function (args) {}
});      
</script>