React Custom DateTime Picker

A fully customizable and theme-aware DateTime Picker React component built with TypeScript. Supports date and time selection, validation, theming (light/dark mode), and many customization options to fit any project.

Features

• Date and Time Selection

  • Choose date only or date + time with a single prop (isTime).
  • Time picker appears inside the calendar container when enabled.

• Validation

  • Allow or disallow past dates (allowPastDates).
  • Allow or disallow future dates (allowFutureDates).
  • Custom validation rules with user-defined functions.
  • Validation error messages.

• Theming and Styling

  • Supports light, dark, and system themes (theme prop).
  • Full control over colors, fonts, padding, margins, borders, shadows.
  • Hover and focus effects.
  • Customizable via props.

• Accessibility

  • Keyboard navigation support.
  • ARIA attributes for screen readers.

• User Interaction

  • Custom placeholder text.
  • Disable the picker.
  • Controlled and uncontrolled modes.
  • Paste detection for input (optional).

• Customization

  • Localization support (custom date/time formats).
  • Custom icons for calendar and clock.
  • Customizable input format.
  • Event callbacks: onChange, onOpen, onClose, onError.

Installation

npm install flexidatetimepicker
# or
yarn add flexidatetimepicker

Usage

import React, { useState } from 'react';
import Flexidatetime  from 'flexidatetimepicker';

function App() {
  const [date, setDate] = useState<Date | null>(null);

  const customValidation = (date: Date) => {
    // Example: disallow weekends
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };

  return (
    <Flexidatetime 
      value={date}
      onChange={setDate}
      isTime={true}
      allowPastDates={false}
      allowFutureDates={true}
      validateDate={customValidation}
      theme="system"
      placeholder="Select event date & time"
      disabled={false}
      onError={(error) => console.log('Validation error:', error)}
    />
  );
}

Props

| Prop | Type | Default | Description | |------------------|-----------------------------|-------------|---------------------------------------------------------------| | value | Date | null | null | Controlled selected date/time. | | defaultValue | Date | null | null | Uncontrolled default value. | | onChange | (date: Date | null) => void | required | Called when date/time changes. | | isTime | boolean | false | Show time picker with date picker. | | allowPastDates | boolean | true | Allow selecting past dates. | | allowFutureDates | boolean | true | Allow selecting future dates. | | validateDate | (date: Date) => boolean | undefined | Custom validation function; return true if valid. | | theme | 'light' | 'dark' | 'system' | 'system' | Theme mode of the picker. | | disabled | boolean | false | Disable the picker. | | placeholder | string | 'Select date' | Placeholder text. | | onError | (error: string) => void | undefined | Callback on validation errors. | | onOpen | () => void | undefined | Callback when calendar opens. | | onClose | () => void | undefined | Callback when calendar closes. | | customFormat | string | Default format | Custom date/time format string (e.g., 'MM/dd/yyyy HH:mm'). | | pasteDetection | boolean | false | Detect paste event on input. |

License

MIT © Mandy

Contributions

Feel free to open issues or PRs. Suggestions and bug reports welcome!