ejDateTimePicker

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>