### Install react-typed-date

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/installation.md

Install the library using your preferred package manager.

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

--------------------------------

### Basic Time Input Setup

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Import and use the TypedDateInput component with a specified time format. Ensure you have the 'react-typed-date' library installed.

```jsx
import { TypedDateInput } from 'react-typed-date';

function App() {
  const [dateTime, setDateTime] = useState(new Date());
  
  return (
    <TypedDateInput
      format="MM/DD/YYYY HH:mm"
      value={dateTime}
      onChange={setDateTime}
    />
  );
}
```

--------------------------------

### Format String Examples

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

Illustrates various format string combinations for date and time representation, including different separators and meridiem indicators.

```plaintext
MM/DD/YYYY             // Date only: 12/25/2023
DD/MM/YYYY             // European date: 25/12/2023
MM/DD/YYYY HH:mm       // US date with time: 12/25/2023 14:30
DD/MM/YYYY HH:mm       // European date with time: 25/12/2023 14:30
MM/DD/YYYY HH:mm:ss    // With seconds: 12/25/2023 14:30:45
DD/MM/YYYY HH:mm:ss    // European with seconds: 25/12/2023 14:30:45
MM/DD/YYYY hh:mm A     // 12-hour format: 12/25/2023 02:30 PM
MM/DD/YYYY hh:mm a     // 12-hour lowercase: 12/25/2023 02:30 pm
```

--------------------------------

### Meeting Scheduler Example

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Implement a meeting scheduler using two TypedDateInput components to manage start and end times. Ensures correct date and time values are passed via onChange.

```jsx
function MeetingScheduler() {
  const [startTime, setStartTime] = useState(new Date());
  const [endTime, setEndTime] = useState(() => {
    const end = new Date();
    end.setHours(end.getHours() + 1);
    return end;
  });

  return (
    <div>
      <label>
        Start: 
        <TypedDateInput
          format="MM/DD/YYYY HH:mm"
          value={startTime}
          onChange={setStartTime}
        />
      </label>
      
      <label>
        End:
        <TypedDateInput  
          format="MM/DD/YYYY HH:mm"
          value={endTime}
          onChange={setEndTime}
        />
      </label>
    </div>
  );
}
```

--------------------------------

### Common Time Format Examples

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Demonstrates various format strings for different regional preferences and precision levels, including 12-hour and 24-hour options.

```jsx
// US format with time
<TypedDateInput format="MM/DD/YYYY HH:mm" />
```

```jsx
// European format with time  
<TypedDateInput format="DD/MM/YYYY HH:mm" />
```

```jsx
// With seconds support
<TypedDateInput format="MM/DD/YYYY HH:mm:ss" />
```

```jsx
// European with seconds
<TypedDateInput format="DD/MM/YYYY HH:mm:ss" />
```

```jsx
// ISO-like format with seconds
<TypedDateInput format="YYYY-MM-DD HH:mm:ss" />
```

```jsx
// 12-hour format with meridiem
<TypedDateInput format="MM/DD/YYYY hh:mm A" />
```

```jsx
// 12-hour format with lowercase meridiem
<TypedDateInput format="MM/DD/YYYY hh:mm a" />
```

--------------------------------

### Meeting Scheduler with Start and End Times

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Implement a meeting scheduler using two instances of useTypedDate to manage start and end times, allowing for date and time input with a specified format. Calculates the duration in minutes.

```jsx
import React, { useState } from 'react';
import { useTypedDate } from 'react-typed-date';

function MeetingScheduler() {
  const [meetingStart, setMeetingStart] = useState(new Date());
  const [meetingEnd, setMeetingEnd] = useState(new Date());
  
  const startProps = useTypedDate({
    value: meetingStart,
    onChange: setMeetingStart,
    format: "MM/DD/YYYY HH:mm"
  });

  const endProps = useTypedDate({
    value: meetingEnd,
    onChange: setMeetingEnd,
    format: "MM/DD/YYYY HH:mm"
  });

  return (
    <div className="meeting-scheduler">
      <label>
        Meeting Start:
        <input 
          {...startProps.inputProps} 
          className="datetime-input"
        />
      </label>
      
      <label>
        Meeting End:
        <input 
          {...endProps.inputProps} 
          className="datetime-input"
        />
      </label>
      
      <div className="meeting-summary">
        <p>Duration: {Math.round((meetingEnd - meetingStart) / 60000)} minutes</p>
      </div>
    </div>
  );
}
```

--------------------------------

### Time Zone Display Example

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Demonstrates displaying local time and UTC time alongside the TypedDateInput component. The component itself manages local Date objects.

```jsx
function TimeZoneConverter() {
  const [localTime, setLocalTime] = useState(new Date());
  
  return (
    <div>
      <TypedDateInput
        format="MM/DD/YYYY HH:mm"
        value={localTime}
        onChange={setLocalTime}
      />
      
      <div>
        <p>Local: {localTime.toLocaleString()}</p>
        <p>UTC: {localTime.toISOString().slice(0, 16).replace('T', ' ')}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### TypedDateInput Validation Example

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

Demonstrates how to use the TypedDateInput component with state management for date values and validation feedback, including setting required and date range constraints.

```tsx
const [value, setValue] = useState<Date | undefined>(undefined);
const [error, setError] = useState<string | null>(null);

<TypedDateInput
  value={value}
  onChange={setValue}
  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);
  }}
/>;
```

--------------------------------

### Business Hours Validation Example

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Apply custom validation logic within the onChange handler to restrict appointments to business hours. Logs a warning for out-of-bounds times.

```jsx
function AppointmentBooking() {
  const [appointment, setAppointment] = useState(new Date());
  
  const handleTimeChange = (date) => {
    const hour = date.getHours();
    
    if (hour < 9 || hour >= 17) {
      // Handle business hours validation
      console.warn('Outside business hours');
    }
    
    setAppointment(date);
  };
  
  return (
    <TypedDateInput
      format="MM/DD/YYYY HH:mm"
      value={appointment}
      onChange={handleTimeChange}
    />
  );
}
```

--------------------------------

### Enabling Time Support in Existing Date-Only Implementation

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Illustrates how to migrate from a date-only format to one that includes time segments. This change is backward compatible.

```jsx
// This continues to work unchanged
<TypedDateInput format="MM/DD/YYYY" />

// Simply add time segments to enable time support
<TypedDateInput format="MM/DD/YYYY HH:mm" />
```

--------------------------------

### Date and Time Input with TypedDateInput

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/README.md

Demonstrates using the TypedDateInput component with different format options for date and time, including hour/minute precision, full seconds, and 12-hour format with meridiem.

```jsx
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}
      />

      {/* 12-hour format with meridiem */}
      <TypedDateInput
        format="MM/DD/YYYY hh:mm A"
        value={dateTime}
        onChange={setDateTime}
      />
    </div>
  );
}
```

--------------------------------

### Basic Date Input

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/basic-usage.md

Use this snippet for simple date input. It requires importing useState and TypedDateInput.

```jsx
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>
  );
}
```

--------------------------------

### Custom Date and Time Input with useTypedDate Hook

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/README.md

Shows how to use the useTypedDate hook for more control over the date and time input, allowing for custom UI and integration with your own input components. It uses a European date format with time.

```jsx
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>
  );
}
```

--------------------------------

### Date and Time Input

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/basic-usage.md

Enable date and time input using the 'MM/DD/YYYY HH:mm' format. This allows users to input both date and time values.

```jsx
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>
  );
}
```

--------------------------------

### Custom Date and Time Formats

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/basic-usage.md

Customize date and time display formats using the 'format' prop. Supports US, European, and 12-hour formats with meridiem.

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

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

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

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

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

--------------------------------

### Time Zone Aware Date Input Component

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Create a component that displays and manages both local and UTC times, updating the UTC time automatically when the local time changes. Uses TypedDateInput for local time input.

```jsx
import React, { useState, useEffect } from 'react';
import { TypedDateInput } from 'react-typed-date';

function TimeZoneAwareDateInput() {
  const [localTime, setLocalTime] = useState(new Date());
  const [utcTime, setUtcTime] = useState(new Date());
  
  useEffect(() => {
    // Update UTC time when local time changes
    setUtcTime(new Date(localTime.getTime()));
  }, [localTime]);

  return (
    <div className="timezone-container">
      <div className="input-group">
        <label>
          Local Time:
          <TypedDateInput
            format="MM/DD/YYYY HH:mm"
            value={localTime}
            onChange={setLocalTime}
          />
        </label>
      </div>
      
      <div className="timezone-display">
        <p>Local: {localTime.toLocaleString()}</p>
        <p>UTC: {utcTime.toISOString().slice(0, 16).replace('T', ' ')}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### Accessing Date Object Components

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/time-support.md

Shows how to access individual components (year, month, day, hours, minutes) from the Date object returned by the onChange handler.

```jsx
const handleChange = (date) => {
  console.log(date.getFullYear()); // Year
  console.log(date.getMonth());    // Month (0-11)
  console.log(date.getDate());     // Day
  console.log(date.getHours());    // Hours (0-23)
  console.log(date.getMinutes());  // Minutes (0-59)
};
```

--------------------------------

### useTypedDate Hook

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

The useTypedDate hook provides the core logic for managing date input, returning validation status and input props for integration with an input element.

```APIDOC
## useTypedDate Hook

### Signature

```typescript
function useTypedDate(options: {
  value?: Date;
  onChange?: (date?: Date) => void;
  format?: string;
  required?: boolean;
  minDate?: Date;
  maxDate?: Date;
  onValidationChange?: (validation: TypedDateValidation) => void;
}): {
  validation: TypedDateValidation;
  inputProps: {
    ref: React.RefObject<HTMLInputElement>;
    type: string;
    value: string;
    "aria-invalid"?: boolean;
    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,
  };
}
```

### Parameters

- **options**: An object containing configuration for the date input.
  - `value` (Date | undefined): The initial date/time value.
  - `onChange` ((date?: Date) => void): Callback when the date/time changes.
  - `format` (string): The format string for parsing and displaying the date/time.
  - `required` (boolean): If true, marks empty values as invalid.
  - `minDate` (Date | undefined): The minimum allowed date/time.
  - `maxDate` (Date | undefined): The maximum allowed date/time.
  - `onValidationChange` ((validation: TypedDateValidation) => void): Callback when the validation status changes.

### Returns

An object containing:
- `validation`: An object with `isValid` (boolean), `code` (ValidationCode), and an optional `message`.
- `inputProps`: An object containing props to be spread onto an HTML input element.
```

--------------------------------

### Date and Time Validation with Range

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/basic-usage.md

Implement validation for date and time inputs, including required fields and date range constraints (minDate, maxDate). The onValidationChange callback provides feedback on validity.

```jsx
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>
  );
}
```

--------------------------------

### useTypedDate Hook TypeScript Signature

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/README.md

Provides the TypeScript signature for the useTypedDate hook, detailing the expected options object and the structure of the returned inputProps.

```typescript
function useTypedDate(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,
  };
}
```

--------------------------------

### Optimize Re-renders with useCallback

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Use `useCallback` to memoize event handlers for datetime inputs. This prevents unnecessary re-renders of child components when the parent component re-renders but the handlers themselves haven't changed.

```jsx
import React, { useState, useCallback } from 'react';
import { TypedDateInput } from 'react-typed-date';

function OptimizedForm() {
  const [startTime, setStartTime] = useState(new Date());
  const [endTime, setEndTime] = useState(new Date());
  
  const handleStartChange = useCallback((date) => {
    setStartTime(date);
  }, []);
  
  const handleEndChange = useCallback((date) => {
    setEndTime(date);
  }, []);
  
  return (
    <form>
      <TypedDateInput
        format="MM/DD/YYYY HH:mm"
        value={startTime}
        onChange={handleStartChange}
      />
      <TypedDateInput
        format="MM/DD/YYYY HH:mm"
        value={endTime}
        onChange={handleEndChange}
      />
    </form>
  );
}

```

--------------------------------

### useTypedDate Hook API

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/README.md

The useTypedDate hook provides the necessary props to integrate date input functionality into a custom input element, offering more control over the UI.

```APIDOC
## useTypedDate Hook

### Description
A hook that manages the state and event handlers for a typed date input, returning props to be spread onto a custom input element.

### Parameters

- **`options`** (object)
  - **`value`** (`Date | undefined`): The initial or current date value.
  - **`onChange`** (`(date?: Date) => void`): Callback function when the date changes.
  - **`format`** (`string`): The desired format for the date input (e.g., "DD/MM/YYYY HH:mm").

### Returns

- **`inputProps`** (object): An object containing props to be applied to an HTML input element.
  - **`ref`**: `React.RefObject<HTMLInputElement>` - A ref for the input element.
  - **`type`**: `string` - The input type (typically 'text').
  - **`value`**: `string` - The formatted string representation of the date.
  - **`onChange`**: `(e: React.ChangeEvent<HTMLInputElement>) => void` - Event handler for input changes.
  - **`onKeyDown`**: `(e: React.KeyboardEvent<HTMLInputElement>) => void` - Event handler for key presses.
  - **`onMouseUp`**: `(e: React.MouseEvent<HTMLInputElement>) => void` - Event handler for mouse clicks.
  - **`onBlur`**: `(e: React.FocusEvent<HTMLInputElement>) => void` - Event handler for input blur.
  - **`onFocus`**: `(e: React.FocusEvent<HTMLInputElement>) => void` - Event handler for input focus.
```

--------------------------------

### Using useTypedDate Hook Directly

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Integrate the useTypedDate hook directly into a custom React component for fine-grained control over date input behavior. This is useful for building highly customized date input fields.

```jsx
import React, { useState } from 'react';
import { useTypedDate } from 'react-typed-date';

function CustomDateInput() {
  const [date, setDate] = useState(new Date());
  
  const { inputProps } = useTypedDate({
    value: date,
    onChange: setDate,
    format: "MM/DD/YYYY"
  });

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

--------------------------------

### European Date and Time Format Input

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Utilize the TypedDateInput component to handle date and time input using the European format (DD/MM/YYYY HH:mm). Displays the selected date and time using 'en-GB' locale.

```jsx
import React, { useState } from 'react';
import { TypedDateInput } from 'react-typed-date';

function EuropeanDateTimeInput() {
  const [appointment, setAppointment] = useState(new Date());
  
  return (
    <div className="appointment-form">
      <label>
        Appointment Date & Time:
        <TypedDateInput
          format="DD/MM/YYYY HH:mm"
          value={appointment}
          onChange={setAppointment}
          className="european-datetime"
        />
      </label>
      
      <div className="formatted-output">
        <p>Selected: {appointment.toLocaleString('en-GB')}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### useTypedDate Hook Signature

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

Defines the signature for the useTypedDate hook, outlining its options and the structure of the returned input properties and validation state.

```typescript
function useTypedDate(options: {
  value?: Date;
  onChange?: (date?: Date) => void;
  format?: string;
  required?: boolean;
  minDate?: Date;
  maxDate?: Date;
  onValidationChange?: (validation: TypedDateValidation) => void;
}): {
  validation: TypedDateValidation;
  inputProps: {
    ref: React.RefObject<HTMLInputElement>;
    type: string;
    value: string;
    "aria-invalid"?: boolean;
    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,
  };
}
```

--------------------------------

### TypedDateInput Component API

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/README.md

The TypedDateInput component allows users to input dates with various formatting options. It supports custom formats, date values, and change callbacks.

```APIDOC
## TypedDateInput Component

### Description
Provides an input field for date and time with type-ahead and navigation capabilities.

### Props

#### `value`
- **Type**: `Date | undefined`
- **Default**: `undefined`
- **Description**: The currently selected date value.

#### `onChange`
- **Type**: `(date?: Date) => void`
- **Default**: `undefined`
- **Description**: Callback function invoked when the date value changes.

#### `format`
- **Type**: `string`
- **Default**: `MM/DD/YYYY`
- **Description**: Specifies the display and input format using tokens like MM, DD, YYYY, HH/hh, mm, ss, A/a. Custom separators are supported.

#### `className`
- **Type**: `string`
- **Default**: `undefined`
- **Description**: Allows applying custom CSS classes for styling the input element.

#### `...props`
- **Type**: `InputHTMLAttributes<HTMLInputElement>`
- **Description**: Accepts any standard HTML input attributes, excluding `type`, `onMouseUp`, `onKeyDown`, `ref`, `onBlur`, `onFocus`.
```

--------------------------------

### TypedDateInput Component Props

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

The TypedDateInput component accepts several props to customize its behavior and appearance, including date value, change handlers, formatting, validation rules, and styling.

```APIDOC
## TypedDateInput Component

### Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `Date | undefined` | `undefined` | Selected date/time value |
| `onChange` | `(date?: Date) => void` | `undefined` | Callback when date/time changes |
| `format` | `string` | `MM/DD/YYYY` | Format using MM, DD, YYYY, HH, mm with custom separators |
| `required` | `boolean` | `false` | Marks empty/incomplete values as invalid |
| `minDate` | `Date | undefined` | `undefined` | Minimum allowed date/time |
| `maxDate` | `Date | undefined` | `undefined` | Maximum allowed date/time |
| `onValidationChange` | `(validation: TypedDateValidation) => void` | `undefined` | Callback when validation status changes |
| `className` | `string` | `undefined` | CSS class for styling |
| `...props` | `InputHTMLAttributes<HTMLInputElement>` | | Any other valid input props except `type`, `onMouseUp`, `onKeyDown`, `ref`, `onBlur`, `onFocus` |
```

--------------------------------

### TypedDateInput Component Props

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/api.md

Defines the properties available for the TypedDateInput component, including value, onChange, format, and validation-related props.

```typescript
type ValidationCode =
  | "none"
  | "incomplete"
  | "invalid_date"
  | "out_of_range_min"
  | "out_of_range_max";

interface TypedDateValidation {
  isValid: boolean;
  code: ValidationCode;
  message?: string;
}
```

--------------------------------

### Custom Validation for Business Hours

Source: https://github.com/cyberstefnef/react-typed-date/blob/main/docs/docs/advanced-usage.md

Implement custom validation logic for a date and time input to ensure selections fall within business hours (9 AM to 5 PM). Displays an error message if the selected time is outside the valid range.

```jsx
import React, { useState } from 'react';
import { TypedDateInput } from 'react-typed-date';

function BusinessHoursInput() {
  const [selectedTime, setSelectedTime] = useState(new Date());
  const [error, setError] = useState('');
  
  const handleTimeChange = (date) => {
    const hour = date.getHours();
    
    // Validate business hours (9 AM - 5 PM)
    if (hour < 9 || hour >= 17) {
      setError('Please select a time during business hours (9:00 - 17:00)');
    } else {
      setError('');
    }
    
    setSelectedTime(date);
  };
  
  return (
    <div className="business-hours-input">
      <label>
        Appointment Time:
        <TypedDateInput
          format="MM/DD/YYYY HH:mm"
          value={selectedTime}
          onChange={handleTimeChange}
          className={error ? 'input-error' : ''}
        />
      </label>
      
      {error && <div className="error-message">{error}</div>}
      
      <div className="help-text">
        Business hours: 9:00 AM - 5:00 PM
      </div>
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.