DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Date Box - Overview

The JavaScript DateBox editor helps users enter or modify date and time values.

DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the DateBox features used.
Backend API

This demo illustrates the following JavaScript DateBox properties:

  • value
    A value the JavaScript DateBox displays.

  • type
    Specifies whether the JavaScript DateBox allows users to select one of the following types:

    • "date"
      Users can select the date from the calendar, or they can type in their own date value (in the required format).

    • "time"
      Users can select a time from a range between 12:00 AM and 11:30 PM at 30-minute intervals, or they can type in their own time value (in the required format). Specify the interval property to set the time interval.

    • "datetime"
      Users can select the date from the calendar and the time from the spin and dropdown editors. They can also choose the Today button.

  • displayFormat
    A date/time display format. You can use one of the predefined formats or specify a custom format. This demo illustrates the latter.

  • pickerType
    Specifies the type of UI used to select a date or time. This demo shows how to change a calendar to a roller date picker.

  • showClearButton
    Specifies whether to display the button that clears the JavaScript DateBox value.

  • disabled
    Specifies whether the JavaScript DateBox responds to user interaction.

  • disabledDates
    Dates that are not available for selection.

  • applyValueMode
    Defines whether the selected value applies instantly or after a user clicks the Apply button.

To get started with the DevExtreme JavaScript DateBox component, refer to the following tutorial for step-by-step instructions: Getting Started with JavaScript DateBox.