DevExtreme React - Specify Value Range

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

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
    ],
    // ...
})

If an entered value falls out of the range, the widget displays an error message. To change the message text, specify the dateOutOfRangeMessage option.

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