Skip to main content

Basic Usage

Basic Date Input​

import { useState } from 'react';
import { TypedDateInput } from 'react-typed-date';

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div className="App">
      <TypedDateInput
        value={date} 
        onChange={setDate}
      />
    </div>
  );
}

Date with Time Support​

The component now supports 24-hour time format alongside date input:

import { useState } from 'react';
import { TypedDateInput } from 'react-typed-date';

function DateTimeApp() {
  const [dateTime, setDateTime] = useState(new Date());

  return (
    <div className="App">
      <TypedDateInput
        format="MM/DD/YYYY HH:mm"
        value={dateTime} 
        onChange={setDateTime}
      />
    </div>
  );
}

Different Date and Time Formats​

You can customize both date and time formats:

// US format with time
<TypedDateInput format="MM/DD/YYYY HH:mm" value={date} onChange={setDate} />

// European format with time
<TypedDateInput format="DD/MM/YYYY HH:mm" value={date} onChange={setDate} />

// 12-hour format with meridiem
<TypedDateInput format="MM/DD/YYYY hh:mm A" value={date} onChange={setDate} />

// Date only (original functionality)
<TypedDateInput format="MM/DD/YYYY" value={date} onChange={setDate} />

// European date only
<TypedDateInput format="DD/MM/YYYY" value={date} onChange={setDate} />

User Experience with Time​

When using time formats, the component provides intuitive interaction:

  1. Segment Navigation: Click or use arrow keys to move between date and time segments
  2. Time Input: Type numbers for hours (0-23) and minutes (0-59)
  3. Validation: Automatic clamping of invalid time values
  4. Arrow Key Adjustment: Use ↑/↓ to increment/decrement time values

The time segments work seamlessly with the existing date functionality, maintaining the same keyboard-friendly experience.

Validation and Date Range​

import { useState } from 'react';
import { TypedDateInput } from 'react-typed-date';

function BookingInput() {
  const [date, setDate] = useState(undefined);
  const [error, setError] = useState(null);

  return (
    <div>
      <TypedDateInput
        value={date}
        onChange={setDate}
        format="MM/DD/YYYY HH:mm"
        required
        minDate={new Date(2026, 0, 1)}
        maxDate={new Date(2026, 11, 31, 23, 59)}
        onValidationChange={(validation) => {
          setError(validation.isValid ? null : validation.message || validation.code);
        }}
      />
      {error && <p>{error}</p>}
    </div>
  );
}