react-typed-date

A React library for creating an intuitive, keyboard-friendly date and time input field with segment navigation.

Documentation and Live Demo

For a live demo, detailed documentation, and examples on how to use react-typed-date, visit the official documentation page.

Motivation

While there are several approaches to date input in React, each with their own strengths:

• Libraries like React ARIA from Adobe offer excellent accessibility and keyboard interaction patterns for date fields
• UI component libraries like Material-UI provide comprehensive date pickers with their design systems
• Native HTML <input type="date"> offers basic functionality but lacks consistent styling across browsers

react-typed-date aims to provide a lightweight alternative that focuses specifically on the date input experience. Inspired by the React ARIA DateField, this library offers the same intuitive keyboard navigation and segment editing in a zero-dependency package that's easy to integrate into any project.

The goal is to provide developers with a simple, flexible date input solution that maintains excellent user experience while giving complete freedom over styling and presentation.

Features

• 🎯 Intuitive keyboard navigation between date and time segments
• 🚦 Smart date validation with awareness of month lengths and leap years
• ⏰ NEW: Flexible time support with configurable precision: hour+minute or full seconds
• ⌨️ Proper keyboard interaction with arrow keys for quick adjustments
• 🎨 Easily stylable with your preferred CSS solution
• 📦 TypeScript support with full type definitions
• 🧩 Zero dependencies

Alternatives

Note that react-typed-date is specifically designed as a date input field with segment navigation, not a date picker with a popup calendar. If you need a full calendar picker component, consider libraries like react-day-picker alongside this library.

Before choosing this library, consider exploring these alternatives. As react-typed-date is a hobby project, these alternatives might offer more extensive feature sets:

• React Aria DateField - Adobe's accessible implementation with comprehensive keyboard support and robust accessibility features, though it requires additional dependencies
• MUI X Date Field - Material UI's polished implementation offering strong validation and formatting capabilities, but closely integrated with MUI's design system
• RSuite DateInput - Clean, well-documented implementation within the RSuite component ecosystem
• Hero UI - Newer component library built on React Aria's foundation with consistent design patterns
• React Date Picker - Established library offering both segmented input and calendar functionality in one package
• Native Date Input - Browser's built-in implementation requiring no dependencies, but with limited styling options and inconsistent cross-browser behavior

Each alternative presents different tradeoffs regarding bundle size, styling flexibility, and dependencies. What sets react-typed-date apart is its focus on providing core functionality with zero dependencies while offering complete styling freedom.

Installation

npm install react-typed-date
# or
yarn add react-typed-date
# or
pnpm add react-typed-date

Basic Usage

Date Only

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 (NEW)

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

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

  return (
    <div className="App">
      {/* Hour + Minute precision */}
      <TypedDateInput
        format="MM/DD/YYYY HH:mm"
        value={dateTime} 
        onChange={setDateTime}
      />
      
      {/* Full seconds precision */}
      <TypedDateInput
        format="MM/DD/YYYY HH:mm:ss"
        value={dateTime} 
        onChange={setDateTime}
      />
    </div>
  );
}

Advanced Usage with Hook

Use the hook directly for more control and custom UI:

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

function CustomDateTimeInput() {
  const [dateTime, setDateTime] = useState(new Date());
  
  const { inputProps } = useTypedDate({
    value: dateTime,
    onChange: setDateTime,
    format: "DD/MM/YYYY HH:mm" // European format with time
  });

  return (
    <div className="custom-datetime-container">
      <input 
        {...inputProps} 
        className="datetime-input"
        aria-label="Date and time input"
      />
    </div>
  );
}

User Experience

react-typed-date provides a seamless user experience:

1. Click anywhere in the input field to focus a segment (month, day, year, hour, minute, second)
2. Type numbers to replace the segment value
3. Use arrow keys to navigate between segments (← →)
4. Use up/down arrows (↑ ↓) to increment/decrement values
5. Time segments: Hours validate to 0-23, minutes and seconds to 0-59

API Reference

TypedDateInput Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date \| undefined | undefined | Selected date value | | onChange | (date: Date) => void | undefined | Callback when date changes | | format | string | MM/DD/YYYY | Format using MM, DD, YYYY, HH, mm, ss with custom separators | | className | string | undefined | CSS class for styling | | ...props | InputHTMLAttributes<HTMLInputElement> | | Any other valid input props except type, onMouseUp, onKeyDown, ref, onBlur, onFocus |

useTypedDate Hook

function useDateField(options: {
  value?: Date;
  onChange?: (date: Date) => void;
  format?: string;
}): {
  inputProps: {
    ref: React.RefObject<HTMLInputElement>;
    type: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
    onMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void,
    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void,
  };
}

Styling

The component accepts a className prop for styling. You can use any CSS-in-JS library, utility classes like Tailwind, or plain CSS.

You can also just use your own input component.

Roadmap

The following features are planned for future releases:

• Date library integration: Support for popular date libraries like date-fns, Day.js, and Moment.js
• Localization: International date formats and localized month/day names
• ~~Time picker: Add support for time input alongside date~~ ✅ COMPLETED
• Range selection: Allow selecting date ranges
• Validation: Add date validation feedback

License

MIT