React DateBox - Specify Value Range

To specify the date or time range, use the min and max properties.

jQuery
JavaScript
$(function() {
    $("#dateBoxContainer").dxDateBox({
        value: "2015/12/31",
        type: "date",
        min: "2015/1/1",
        max: "2015/12/31"
    });
});
Angular
HTML
TypeScript
<dx-date-box
    value="2015/12/31"
    type="date"
    min="2015/1/1"
    max="2015/12/31">
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDateBox
        value="2015/12/31"
        type="date"
        min="2015/1/1"
        max="2015/12/31"
    />
</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
    }
}
</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 {
    render() {
        return (
            <DateBox
                defaultValue="2015/12/31"
                type="date"
                min="2015/1/1"
                max="2015/12/31"
            />
        );
    }
}
export default App;

If an entered value falls out of the range, the UI component displays an error message. To change the message text, specify the dateOutOfRangeMessage property.

jQuery
JavaScript
$(function() {
    $("#dateBoxContainer").dxDateBox({
        value: "2015/12/31",
        type: "date",
        min: "2015/1/1",
        max: "2015/12/31",
        dateOutOfRangeMessage: "Date is out of range"
    });
});
Angular
HTML
TypeScript
<dx-date-box
    value="2015/12/31"
    type="date"
    min="2015/1/1"
    max="2015/12/31"
    dateOutOfRangeMessage="Date is out of range">
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDateBox
        value="2015/12/31"
        type="date"
        min="2015/1/1"
        max="2015/12/31"
        date-out-of-range-message="Date is out of range"
    />
</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
    }
}
</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 {
    render() {
        return (
            <DateBox
                defaultValue="2015/12/31"
                type="date"
                min="2015/1/1"
                max="2015/12/31"
                dateOutOfRangeMessage="Date is out of range"
            />
        );
    }
}
export default App;
See Also