< DHTMLX Suite 8.4 Release: API Updates for Grid/TreeGrid, Chart, Toolbar, ComboBox, and New Samples
Download

React Datepicker

A simple and handy React date time picker with infinite customization options based on dhtmlxCalendar - a part of the modern
Suite UI library.

Download
View more demos
Compatible with:
Vue.js Vue.js
JavaScript JavaScript
Angular Angular

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Highly configurable
  • Fully customizable
  • Ability to set inactive dates
  • Configurable first day of the week
  • Accessibility support
  • Built-in multilingual support
  • 12-hour and 24-hour time format
  • Ability to add time picker
  • Ability to highlight dates
  • Ability to add numbers of weeks
  • Ability to select a range of dates
  • 3 views: calendar, month, year

Easily Initialize Your React Date Picker

Look How to Build a React Datepicker in 5 Clear Steps:
1
Create a DatePicker.js file and import files and styles of DatePicker
2
Create DatePicker class, which extends the Component class
3
Add an empty container for DatePicker with the reference to it in the el property using the ref property
4
When the component is initialized, initialize DatePicker and attach the instance of Calendar to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed
Check the demo on Github

Why Choose React Datepicker by DHTMLX?

Integrate React date picker with ease

Our datepicker is a fully-configurable lightweight widget with multi-browser support. The React date time picker control is based on dhtmlxCalendar component. Just add the widget to a text input field that opens a popup with a calendar after a user clicks on it.

Allow selecting date ranges

DHTMLX datepicker provides custom date format, multilanguage support and can be used for more accurate data and time selection. Adjust the choice of the first day of the week and tailor a year drop-down list. You can use the control as a React date range picker when days before and after the available date range become inactive.

Fully customize your datepicker

Being a part of dhtmlxCalendar, the control supports full customization to match the look and feel of your web app. Our Material UI React date picker is highly modifiable. You can add a border and shadow, set up colors of all elements including the background, numbers, highlighted dates and their ranges.

Use Angular and Vue.js wrappers

DHTMLX React date picker component can be easily integrated into Angular and Vue.js web apps by using special wrappers. Download a 30-day free trial and explore all Suite UI library benefits. Access to the official technical support is included.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Documentation
Support
Forum
Samples

Other Suite Components

Calendar
Chart
ColorPicker
ComboBox
DataView
DatePicker
Form
Grid
Layout
List
Menu
Message
Popup
Ribbon
Sidebar
Slider
Tabbar
TimePicker
Toolbar
Tree
TreeGrid
Window
demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Download

Need help with dhtmlxDatePicker integration into your app? Contact us