ReacUI
🚀ReacUI is currently in Beta. We're actively improving it! ❣️

DateTimePicker

A flexible component for selecting dates, times, or both from a calendar or time input

April 2023

SuMoTuWeThFrSa
262728293031123456

Installation

The DateTimePicker component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the DateTimePicker component into your React component.

import { DateTimePicker } from 'reacui';

Basic DatePicker

Use the DateTimePicker in date mode to allow users to select a date from a calendar.

import { useState } from 'react';
import { DateTimePicker } from 'reacui';

function Example() {
  const [date, setDate] = useState(new Date('2023-04-23'));
  
  return (
    <DateTimePicker
      value={date}
      onChange={setDate}
      mode="date"
    />
  );
}

TimePicker

Use the DateTimePicker in time mode to allow users to select a specific time.

import { useState } from 'react';
import { DateTimePicker } from 'reacui';

function Example() {
  const [time, setTime] = useState(new Date('2023-04-23T14:30:00'));
  
  return (
    <DateTimePicker
      value={time}
      onChange={setTime}
      mode="time"
    />
  );
}

DateTimePicker

Use the DateTimePicker in datetime mode to allow users to select both a date and time.

import { useState } from 'react';
import { DateTimePicker } from 'reacui';

function Example() {
  const [datetime, setDatetime] = useState(new Date('2023-04-23T14:30:00'));
  
  return (
    <DateTimePicker
      value={datetime}
      onChange={setDatetime}
      mode="datetime"
    />
  );
}

Date Range Picker

Use the DateTimePicker with the range prop to select a date range.

import { useState } from 'react';
import { DateTimePicker } from 'reacui';

function Example() {
  const [dateRange, setDateRange] = useState({
    start: new Date('2023-04-10'),
    end: new Date('2023-04-20')
  });
  
  return (
    <DateTimePicker
      value={dateRange}
      onChange={setDateRange}
      mode="date"
      range
    />
  );
}

Customization

The DateTimePicker can be customized with various options.

import { useState } from 'react';
import { DateTimePicker } from 'reacui';

function Example() {
  const [date, setDate] = useState(new Date('2023-04-23'));
  
  return (
    <DateTimePicker
      value={date}
      onChange={setDate}
      mode="date"
      format="MMM dd, yyyy (Custom Format)"
      theme="primary"
      weekStartsOn={1} // Start week on Monday
      disabledDates={[new Date('2023-04-25')]} // Disable specific dates
    />
  );
}

API Reference

The following props are available for the DateTimePicker component.

PropTypeDefaultDescription
valueDate | {start: Date, end: Date}new Date()The selected date/time value.
onChangefunctionrequiredCallback function when the value changes.
modestring'date'Mode of the picker: 'date', 'time', or 'datetime'.
rangebooleanfalseWhether to enable date range selection.
formatstringDepends on modeFormat string for the displayed date/time.
themestring'secondary'Color theme for the picker: 'primary', 'secondary', etc.
weekStartsOnnumber0First day of the week (0 = Sunday, 1 = Monday, etc.).
minDateDate-Minimum selectable date.
maxDateDate-Maximum selectable date.
disabledDatesDate[][]Array of dates that cannot be selected.
classNamestring''Additional CSS classes for the component.