All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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
                value="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
    ],
    // ...
})
See Also