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 following GitHub repository: getting-started-with-datebox.
Create the DateBox
Use the following code to create a basic DateBox:
jQuery
$(function() { $("#dateBox").dxDateBox({ // Configuration goes here }); });
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.common.css"> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body class="dx-viewport"> <div id="dateBox"></div> </body> </html>
Angular
<dx-date-box <!-- Configuration goes here --> > </dx-date-box>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDateBoxModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDateBoxModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxDateBox <!-- Configuration goes here --> /> </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
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 // 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).
jQuery
$(function() { $("#dateBox").dxDateBox({ type: "datetime" }); });
Angular
<dx-date-box type="datetime"> </dx-date-box>
Vue
<template> <DxDateBox type="datetime" /> </template> <script> // ... </script>
React
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 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:
jQuery
$(function() { const now = new Date(); $("#dateBox").dxDateBox({ max: now, min: new Date(1900, 0, 1), }); });
Angular
<dx-date-box ... [min]="minDate" [max]="now"> </dx-date-box>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { minDate: Date = new Date(1900, 0, 1); now: Date = new Date(); }
Vue
<template> <DxDateBox ... :min="minDate" :max="now" /> </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 }, data() { return { minDate: new Date(1900, 0, 1) now: Date(), } } } </script>
React
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 { 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.
jQuery
$(function() { const now = new Date(); $("#dateBox").dxDateBox({ // ... value: now }); });
Angular
<dx-date-box ... [value]="now"> </dx-date-box>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... now: Date = new Date(); }
Vue
<template> <DxDateBox ... :value="now" /> </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 }, data() { return { // ... now: Date(), } } } </script>
React
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 { // ... 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.
jQuery
$(function() { $("#dateBox").dxDateBox({ // ... onValueChanged: function(e) { console.log(e.value); console.log(e.previousValue); }, }); });
Angular
<dx-date-box ... (onValueChanged)="onValueChanged($event)"> </dx-date-box>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... onValueChanged(e) { console.log(e.previousValue); console.log(e.value); } }
Vue
<template> <DxDateBox ... @value-changed="onValueChanged" /> </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 { // ... methods: { onValueChanged(e) { console.log(e.previousValue); console.log(e.value); } } } </script>
React
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 { 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;
In the next part, we will disable specific dates.
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.
jQuery
$(function() { // ... 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) ]; $("#dateBox").dxDateBox({ // ... disabledDates: function(args) { const dayOfWeek = args.date.getDay(); const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; return args.view === "month" && (isWeekend || isHoliday(args.date)); } }); function isHoliday(date) { for (let holiday of holidays) { if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) { return true; } } return false; } });
Angular
<dx-date-box ... [disabledDates]="getDisabledDates"> </dx-date-box>
import { Component } from '@angular/core'; import { AppService } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... holidays: Date[]; constructor(service: AppService) { this.holidays = service.getHolidays(); this.getDisabledDates = this.getDisabledDates.bind(this); } getDisabledDates(args): boolean { const dayOfWeek = args.date.getDay(); const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; return args.view === "month" && (isWeekend || this.isHoliday(args.date)); } isHoliday(date): boolean { for (let holiday of this.holidays) { if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) { return true; } } return false; } }
import { Injectable } from '@angular/core'; 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) ]; @Injectable() export class AppService { getHolidays(): Date[] { return holidays; } }
Vue
<template> <DxDateBox ... :disabled-dates="getDisabledDates" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxDateBox } from 'devextreme-vue/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) ] export default { // ... methods: { 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; } } } </script>
React
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'; 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.