Date Box

• Jul 17, 2026
• 3 minutes to read

DateBox is a UI component that allows users to enter or modify date and time values. The component ships with three entry modes that eliminate the need for separate date, time, and date/time selection components. DateBox supports date and time entry through built-in dropdown pickers, as well as in the component text field.

Run Demo: DateBox Read Tutorial

Getting Started

The DateBox UI Control is based on the DevExtreme DateBox component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

DateBoxBasics.cshtml

@(Html.DevExtreme().DateBox()
    .Value(DateTime.Now)
)

DateBoxController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class DateBoxController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• DateBox Types
  You can configure the DateBox type to integrate the component as a date, time, or date and time picker.

• Picker Configuration
  DateBox supports multiple picker types, including calendar, list, and roller pickers. You can also implement native pickers that vary depending on the user’s device and platforms.

• Formatting
  The DateBox component automatically formats values based on your application locale. You can also specify display formats, including predefined, Intl, and custom formats.

• Masked Input
  DateBox supports masked input. When enabled, the component allows users to input only characters supported by the DateBox display format.

• Configurable Date and Time Ranges
  You can limit DateBox selection to a specific date and time range. For instance, you can specify a new Date object as the minimum to disable date and time values in the past.

• Disabled Dates
  DateBox allows you to disable individual dates. You can implement this feature to disable days such as holidays.

• Drop-Down Calendar Configuration
  You can customize DateBox Calendar options such as zoom level and week numbers.

• Validation
  The DateBox component ships with data validation capabilities. You can implement custom logic to validate the component value and display a validation status. You can also validate DateBox values within a DevExtreme Form component.

• Adaptivity
  You can enable adaptive rendering to adapt DateBox to small screens. In this mode, the component displays compact visual elements.

• Accessibility and Keyboard Navigation
  DateBox conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. DateBox also ships with right-to-left (RTL) representation support.

• Customization
  You can customize DateBox elements such as the text field and drop-down area. The component supports label and placeholder configration, as well as custom text field buttons.

API

Server-Side API

Initialization

Call the DateBox() method to create a DateBox control. This action initializes a DateBoxBuilder instance. Use the instance methods to specify DateBox options and event handlers.

Options

For a complete option list, see DateBoxBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the DateBox options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme DateBox options.

Methods

For a list of available methods, see DevExtreme DateBox methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on DateBox accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: DateBox