DevExtreme Vue - 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.

jQuery
HTML
JavaScript
<div id="dateBoxContainer"></div>
$(function() {
    $("#dateBoxContainer").dxDateBox({
        value: new Date(),
        type: "date"
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
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