DevExtreme jQuery - Overview

The DateBox is a widget that displays a date and time in a specified format, and enables a user to pick or type in the required date/time value.

View Demo

The following code adds a simple DateBox to your page.

<div id="dateBoxContainer"></div>

$(function() {
    $("#dateBoxContainer").dxDateBox({
        value: new Date(),
        type: "date"
    });
});

<dx-date-box
    [(value)]="date"
    type="date">
</dx-date-box>

import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    date: Date = new Date()
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})

<template>
    <DxDateBox
        :value="date"
        type="date"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDateBox from 'devextreme-vue/date-box';

export default {
    components: {
        DxDateBox
    },
    data() {
        return {
            date: new Date()
        };
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DateBox from 'devextreme-react/date-box';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.date = new Date();
    }

    render() {
        return (
            <DateBox
                defaultValue={this.date}
                type="date"
            />
        );
    }
}
export default App;

The DateBox accepts values of the following formats: dates, numeric values specifying the number of milliseconds since January 1, 1970, 00:00:00, and strings that match the following patterns: 'yyyy-MM-dd', 'yyyy-MM-ddTHH:mm:ss', 'yyyy-MM-ddTHH:mm:ssZ', or 'yyyy-MM-ddTHH:mm:ssx'. Note that in code, the format stays the same until a value of a different format is assigned to the value option. For example, numbers remain numbers until you pass a string to the value option.

In addition, the DateBox supports several date and time types. That is, it can display only the date or time, or both. To specify the required type, set the type option.

Depending on the platform, the DateBox provides different controls for picking values. See the Platform-Specific Value Pickers topic for details.

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• DateBox - Control the Behavior
• DateBox - Specify Value Range
• DateBox - Handle the Value Change Event
• DateBox - Keyboard Support
• DateBox API Reference