React DateBox - Getting Started
DateBox is a UI component that allows users to set a certain date, time, or date/time combination.
This tutorial shows how to configure basic DateBox features. The newly created UI component allows users to set the date and time from a specific date range, logs this value to the console, and prevents users from specifying weekend days (Saturday and Sunday) and US bank holidays.
Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository.
Create the DateBox
Use the following code to create a basic DateBox:
- 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
- // Configuration goes here
- />
- );
- }
- }
- export default App;
If you run this code, you will that see the DateBox that allows users to set the date only. Users will be allowed to set the time in the next step.
Set the DateBox Type
To allow users to specify the date and time, set the type to "datetime". This will implicitly set applyValueMode to "useButtons" (i.e., a user must press OK to submit their choices).
- 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
- type="datetime"
- />
- );
- }
- }
- export default App;
Run this code and ensure it is possible to specify the date and time. In the next step, we will set an accepted date range.
Set the Accepted Date Range
To define the range from which users can select dates, specify the min and max properties:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateBox } from 'devextreme-react/date-box';
- class App extends React.Component {
- minDate = new Date(1900, 0, 1);
- now = new Date();
- render() {
- return (
- <DateBox
- min={this.minDate}
- max={this.now}
- />
- );
- }
- }
- export default App;
Run the code and ensure that the only available dates are between 1 Jan 1900 and today. Next, we will set the UI component's initial value.
Set the Value
To set the UI component's value, specify the value property. In this tutorial, it is equal to the current date and time.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateBox } from 'devextreme-react/date-box';
- class App extends React.Component {
- // ...
- now = new Date();
- constructor(props) {
- super(props);
- this.state = {
- dateBoxValue: this.now
- };
- }
- render() {
- return (
- <DateBox ...
- value={this.state.dateBoxValue}
- />
- );
- }
- }
- export default App;
In the next step, we will handle the value change event.
Handle the Value Change Event
To handle value changes, implement the onValueChanged function. In this tutorial, it logs the previous and current values.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateBox } from 'devextreme-react/date-box';
- class App extends React.Component {
- constructor(props) {
- // ...
- this.onValueChanged = this.onValueChanged.bind(this);
- }
- onValueChanged(e) {
- console.log(e.previousValue);
- console.log(e.value);
- this.setState({
- dateBoxValue: e.value
- });
- }
- render() {
- return (
- <DateBox ...
- onValueChanged={this.onValueChanged}
- />
- );
- }
- }
- export default App;
Add a Label
To specify label text, set the label property. If you want to enable floating labels, set the labelMode property to "floating". In this case, the label acts as a placeholder, but when the editor gets focus, the label moves to the position above the input field.
- // ...
- class App extends React.Component {
- // ...
- render() {
- return (
- <DateBox ...
- label="Date and time"
- labelMode="floating"
- />
- );
- }
- }
- export default App;
Disable Specific Dates
To prevent users from setting specific dates, use the disabledDates property. It can be set to a function or an array of Date values. In this tutorial, we implement a function that disables weekend days (Saturday and Sunday) and US bank holidays.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateBox } from 'devextreme-react/date-box';
- const holidays = [
- new Date(0, 0, 1),
- new Date(0, 0, 20),
- new Date(0, 1, 17),
- new Date(0, 4, 10),
- new Date(0, 4, 25),
- new Date(0, 5, 21),
- new Date(0, 6, 4),
- new Date(0, 8, 7),
- new Date(0, 9, 5),
- new Date(0, 9, 12),
- new Date(0, 10, 11),
- new Date(0, 10, 26),
- new Date(0, 10, 27),
- new Date(0, 11, 24),
- new Date(0, 11, 25),
- new Date(0, 11, 31)
- ];
- class App extends React.Component {
- // ...
- constructor(props) {
- // ...
- this.getDisabledDates = this.getDisabledDates.bind(this);
- }
- getDisabledDates(args) {
- const dayOfWeek = args.date.getDay();
- const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
- return args.view === "month" && (isWeekend || this.isHoliday(args.date));
- }
- isHoliday(date) {
- for (let holiday of holidays) {
- if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
- return true;
- }
- }
- return false;
- }
- render() {
- return (
- <DateBox ...
- disabledDates={this.getDisabledDates}
- />
- );
- }
- }
- export default App;
Run the code and ensure that the disabled dates cannot be set.
You have now configured the basic DateBox features. For more details on this UI component, explore the following resources:
If you have technical questions, please create a support ticket in the DevExpress Support Center.