Angular 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.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.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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.