React DateBox - Specify Value Range
To specify the date or time range, use the min and max properties.
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.
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
<<<<<<< HEAD - DateBox - Control the Behavior
- DateBox - Handle the Value Change Event
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.