Getting Started

Basic Usage

The picker requires three essential props: start, end, and applyCallback. Optionally pass ranges to show preset range buttons. Pass a trigger element as children — clicking it opens the picker dropdown.

import { useState } from 'react';
import ReactDateTimePicker from 'react-tailwindcss-datetimepicker';
import { startOfDay, endOfDay, subDays } from 'date-fns';

const ranges = {
  Today: [startOfDay(new Date()), endOfDay(new Date())],
  'Last 7 Days': [subDays(new Date(), 7), new Date()],
  'Last 30 Days': [subDays(new Date(), 30), new Date()],
};

function MyComponent() {
  const [start, setStart] = useState(new Date());
  const [end, setEnd] = useState(new Date());

  function handleApply(startDate: Date, endDate: Date) {
    setStart(startDate);
    setEnd(endDate);
  }

  return (
    <ReactDateTimePicker
      ranges={ranges}
      start={start}
      end={end}
      applyCallback={handleApply}
    >
      <button>Select date range</button>
    </ReactDateTimePicker>
  );
}

Class Components

The picker works with both functional and class components. Here is an equivalent class component example:

import React from 'react';
import ReactDateTimePicker from 'react-tailwindcss-datetimepicker';

const ranges = {
  Today: [new Date(), new Date()],
};

class MyComponent extends React.Component {
  state = {
    start: new Date(),
    end: new Date(),
  };

  handleApply = (start: Date, end: Date) => {
    this.setState({ start, end });
  };

  render() {
    return (
      <ReactDateTimePicker
        ranges={ranges}
        start={this.state.start}
        end={this.state.end}
        applyCallback={this.handleApply}
      >
        <button>Select date range</button>
      </ReactDateTimePicker>
    );
  }
}