React-DateTime-Picker

https://github.com/wojtekmaj/react-datetime-picker
Admin
React-DateTime-Picker is a datetime picker for your React app, offering extensive language support...
Tokens:48,318
Snippets:517
Trust Score:10
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Minimal DateTimePicker Setup

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Demonstrates the most basic setup for the DateTimePicker component. Ensure you have React and useState imported.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function BasicPicker() {
  const [value, setValue] = useState<Date | null>(null);
  return <DateTimePicker value={value} onChange={setValue} />;
}
```

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

### Configuration and Advanced Usage

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/GENERATION_REPORT.txt

This section covers configuration options, advanced usage patterns, and detailed guides for specific aspects like SSR setup and format string issues.

```APIDOC
## Configuration and Advanced Usage

This section covers configuration options, advanced usage patterns, and detailed guides for specific aspects like SSR setup and format string issues.

### Configuration Guide (`configuration.md`)

Details on setting up the component, including optional configurations for major dependencies and advanced patterns for specific use cases like Server-Side Rendering (SSR).

### Format Reference (`format-reference.md`)

A complete guide to format strings, explaining their syntax and usage for customizing date and time display. Also covers issues related to format string interpretation.

### Patterns and Troubleshooting (`patterns-and-troubleshooting.md`)

Provides implementation patterns and an indexed troubleshooting guide, helping users resolve common problems and understand best practices for using the component.
```

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

### Date Format Examples

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/README.md

Examples demonstrating different date and time format strings for various locales. These formats use Unicode Standard #35 tokens.

```plaintext
'MM/dd/yyyy HH:mm' → 06/15/2024 14:30 (US)
```

```plaintext
'dd.MM.yyyy HH:mm' → 15.06.2024 14:30 (EU)
```

```plaintext
'yyyy/MM/dd HH:mm' → 2024/06/15 14:30 (Asia)
```

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

### ValueType='minute' Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/NativeInput.md

Demonstrates the format and step value when valueType is set to 'minute'. The native value is truncated to the minute.

```text
Format: YYYY-MM-DDTHH:MM

Step: 60 seconds (1 minute)

Example:
- Date: 2024-06-15T14:30:45
- Native value: 2024-06-15T14:30
```

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

### ValueType='second' Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/NativeInput.md

Demonstrates the format and step value when valueType is set to 'second'. The native value includes seconds.

```text
Format: YYYY-MM-DDTHH:MM:SS

Step: 1 second

Example:
- Date: 2024-06-15T14:30:45
- Native value: 2024-06-15T14:30:45
```

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

### onClockOpen Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the clock opens. Use this to trigger actions when the clock interface becomes visible.

```javascript
() => alert('Clock opened')
```

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

### onCalendarOpen Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the calendar opens. Use this to trigger actions upon calendar visibility.

```javascript
() => alert('Calendar opened')
```

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

### ValueType='hour' Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/NativeInput.md

Demonstrates the format and step value when valueType is set to 'hour'. The native value is truncated to the hour.

```text
Format: YYYY-MM-DDTHH:00

Step: 3600 seconds (1 hour)

Example:
- Date: 2024-06-15T14:00:00
- Native value: 2024-06-15T14:00
```

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

### onChange Callback Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/NativeInput.md

Demonstrates how to handle the onChange event from the native input, accessing the event target's value.

```tsx
<NativeInput
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
    const nativeValue = event.target.value;  // e.g., "2024-06-15T14:30"
    // Parse and handle the native input change
  }}
/>
```

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

### Example Usage of shouldOpenWidgets

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Shows how to use the shouldOpenWidgets prop to conditionally control when the calendar or clock widgets open, based on the OpenReason.

```tsx
shouldOpenWidgets={({ reason, widget }) => {
  return reason === 'buttonClick';  // Only open on button click
}}
```

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

### Valid ClassName Examples

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Demonstrates various ways to assign CSS class names using the ClassName type.

```tsx
className="my-class"
```

```tsx
className={["class1", "class2", null, "class3"]}
```

```tsx
className={null}
```

```tsx
className={undefined}
```

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

### Basic Usage of DateTimePicker

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Demonstrates the fundamental setup for using the DateTimePicker component. Ensure you import the component and manage its state using useState.

```tsx
import { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>(new Date());

  return (
    <div>
      <DateTimePicker onChange={onChange} value={value} />
    </div>
  );
}
```

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

### Example Usage of shouldCloseWidgets

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Demonstrates how to use the shouldCloseWidgets prop to prevent widgets from closing based on specific CloseReason values.

```tsx
shouldCloseWidgets={({ reason, widget }) => {
  return reason !== 'outsideAction';  // Prevent closing on outside clicks
}}
```

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

### onFocus Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the user focuses an input. This can be used to track user interaction with input fields.

```javascript
(event) => alert('Focused input: ', event.target.name)
```

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

### onClockClose Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the clock closes. Use this to perform actions after the clock interface is hidden.

```javascript
() => alert('Clock closed')
```

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

### openWidgetsOnFocus Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Controls whether widgets open on input focus. It's recommended to use the `shouldOpenWidgets` function for more control.

```javascript
false
```

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

### JavaScript Import Example without Types

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/exports-index.md

Shows how to import and use the DateTimePicker component in plain JavaScript, without explicit type annotations.

```javascript
import DateTimePicker from 'react-datetime-picker';

function MyPicker() {
  const [value, setValue] = useState(null);

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      maxDetail="minute"
    />
  );
}
```

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

### Basic DateTimeInput Usage

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimeInput.md

Demonstrates the basic setup for the DateTimeInput component, including state management for the selected date and time. It sets a maximum detail level to 'minute'.

```tsx
import DateTimeInput from 'react-datetime-picker/dist/DateTimeInput';

function MyDateTimeInput() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimeInput
      className="my-datetime-input"
      value={value}
      onChange={(newValue, shouldClose) => {
        setValue(newValue);
        console.log('Should close widgets:', shouldClose);
      }}
      maxDetail="minute"
    />
  );
}
```

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

### Example Usage of Value Type

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Demonstrates how to use the Value type with the useState hook for managing datetime selection.

```tsx
const [value, setValue] = useState<Value>(null);
```

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

### Min/Max Date Conversion Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/NativeInput.md

Shows how minDate and maxDate props are converted to the native input's attribute format based on the valueType.

```tsx
// Example: valueType="minute"
const minDate = new Date('2024-06-15T10:30:00');
// Sets min attribute to: "2024-06-15T10:30"

const maxDate = new Date('2024-06-15T18:45:30');
// Sets max attribute to: "2024-06-15T18:45"
```

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

### onChange Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the user picks a valid datetime. If any fields are excluded, a default base date is used.

```javascript
(value) => alert('New date is: ', value)
```

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

### TypeScript Import Example with Full Type Safety

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/exports-index.md

Demonstrates importing and using the DateTimePicker component in TypeScript, including type definitions for props and state management.

```typescript
import DateTimePicker from 'react-datetime-picker';
import type {
  DateTimePickerProps,
  Value,
  Detail,
  OpenReason,
  CloseReason,
} from 'react-datetime-picker';

function MyPicker(props: DateTimePickerProps): React.ReactElement {
  const [value, setValue] = useState<Value>(null);
  const [detail, setDetail] = useState<Detail>('minute');
  
  const handleOpen = (reason: OpenReason) => {
    console.log('Widget opening:', reason);
  };
  
  const handleClose = (reason: CloseReason) => {
    console.log('Widget closing:', reason);
  };
  
  return (
    <DateTimePicker
      {...props}
      value={value}
      onChange={setValue}
      maxDetail={detail}
    />
  );
}
```

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

### Custom Styling Example for DateTimePicker

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Apply custom CSS styles to the DateTimePicker component using its BEM-style class names. This example demonstrates overriding default styles for the main container, input fields, and buttons to match a specific design.

```css
/* Override default styling */
.react-datetime-picker {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
}

.react-datetime-picker--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.react-datetime-picker__inputGroup__input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
}

.react-datetime-picker__inputGroup__input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.react-datetime-picker__calendar-button {
  cursor: pointer;
  padding: 4px 8px;
}

.react-datetime-picker__clear-button {
  cursor: pointer;
  padding: 4px 8px;
}
```

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

### Production-Ready DateTimePicker Setup with Constraints

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Configures the DateTimePicker for production use with specific date constraints and various display options. Sets a minimum and maximum date, and enables/disables certain features.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function ProductionPicker() {
  const [value, setValue] = useState<Date | null>(new Date());
  const minDate = new Date();
  const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);  // 30 days ahead

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      minDate={minDate}
      maxDate={maxDate}
      required={true}
      disabled={false}
      disableCalendar={false}
      disableClock={false}
      maxDetail="minute"
      showLeadingZeros={true}
      openWidgetsOnFocus={true}
      closeWidgets={true}
    />
  );
}
```

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

### Accessibility-Focused DateTimePicker Setup

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Configures the DateTimePicker with ARIA labels for improved accessibility. This setup is crucial for screen reader users and keyboard navigation.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function A11yPicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      dayAriaLabel="Day of month"
      monthAriaLabel="Month"
      yearAriaLabel="Year"
      hourAriaLabel="Hour"
      minuteAriaLabel="Minute"
      secondAriaLabel="Second"
      amPmAriaLabel="AM/PM"
      calendarAriaLabel="Toggle calendar widget"
      clearAriaLabel="Clear selected date and time"
      nativeInputAriaLabel="Enter date and time"
      data-testid="datetime-picker-main"
    />
  );
}
```

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

### Basic DateTimePicker Import and Usage

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/README.md

Demonstrates the basic import of the DateTimePicker component and its associated CSS. This is the starting point for integrating the component into a React application.

```tsx
import DateTimePicker from 'react-datetime-picker';
import 'react-datetime-picker/dist/DateTimePicker.css';
import 'react-calendar/dist/Calendar.css';
import 'react-clock/dist/Clock.css';

function App() {
  const [value, setValue] = useState<Date | null>(new Date());
  return <DateTimePicker value={value} onChange={setValue} />;
}
```

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

### Generic Example of Range Type

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Shows how to use the Range generic type to create specific range types like DateRange or StringRange.

```typescript
type DateRange = Range<Date>;  // [Date, Date]
type StringRange = Range<string>;  // [string, string]
```

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

### Use Correct Format Tokens

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

Ensure all tokens in the `format` string are recognized by the picker. For example, use 'd' for day, 'M' for month, and 'a' for AM/PM.

```tsx
// ❌ "D" is not a valid token
<DateTimePicker format="D/M/yyyy HH:mm" />

// ✅ Use "d" instead
<DateTimePicker format="d/M/yyyy HH:mm" />
```

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

### Basic Uncontrolled DateTimePicker Usage

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

Demonstrates the simplest way to use DateTimePicker for capturing a datetime without complex state management. Ensure 'react-datetime-picker' is installed and imported.

```tsx
import { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function SimpleForm() {
  const [selectedTime, setSelectedTime] = useState<Date | null>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTime) {
      alert('Please select a date and time');
      return;
    }
    console.log('Submitting:', selectedTime.toISOString());
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Select Date & Time:</label>
      <DateTimePicker value={selectedTime} onChange={setSelectedTime} />
      <button type="submit">Submit</button>
    </form>
  );
}

```

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

### Internationalization Setup for DateTimePicker

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Configures the DateTimePicker for international use by specifying locale and format strings. Supports multiple date and time formats based on the provided locale.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function I18nPicker({ locale }: { locale: string }) {
  const [value, setValue] = useState<Date | null>(null);

  // Format strings for different locales
  const formatByLocale: Record<string, string> = {
    'en-US': 'MM/dd/yyyy h:mm a',
    'en-GB': 'dd/MM/yyyy HH:mm',
    'de-DE': 'dd.MM.yyyy HH:mm',
    'fr-FR': 'dd/MM/yyyy HH:mm',
    'es-ES': 'dd/MM/yyyy HH:mm',
    'ja-JP': 'yyyy/MM/dd HH:mm',
    'zh-CN': 'yyyy/MM/dd HH:mm',
  };

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      locale={locale}
      format={formatByLocale[locale] || 'yyyy-MM-dd HH:mm'}
      dayPlaceholder="dd"
      monthPlaceholder="mm"
      yearPlaceholder="yyyy"
      hourPlaceholder="hh"
      minutePlaceholder="mm"
    />
  );
}
```

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

### Locale Configuration for DateTimePicker

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Configure the locale for the DateTimePicker component using the `locale` prop. Examples show automatic locale detection, explicitly setting a locale, and using a locale value from component state.

```tsx
// Automatic: Uses browser locale or server locale
<DateTimePicker value={new Date()} />

// Explicit: Force a specific locale
<DateTimePicker locale="de-DE" value={new Date()} />

// Conditional: Locale from state or context
const [locale, setLocale] = useState('en-US');
<DateTimePicker locale={locale} value={new Date()} />
```

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

### DateTimePicker with Portal Rendering

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimePicker.md

Configures the DateTimePicker to render its widgets in a specified portal container, useful for handling overflow issues. Uses `useRef` to get a reference to the portal container.

```tsx
import { useRef } from 'react';
import DateTimePicker from 'react-datetime-picker';

export function PortalPicker() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div>
      <DateTimePicker
        portalContainer={containerRef.current || undefined}
        value={value}
        onChange={setValue}
      />
      <div ref={containerRef} style={{ position: 'relative', zIndex: 1000 }} />
    </div>
  );
}
```

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

### SSR Configuration: Client-side Locale Detection

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Configure DateTimePicker for Server-Side Rendering (SSR) by ensuring locale and format match between server and client. This example detects the browser's locale on the client after mounting to prevent hydration mismatches.

```tsx
'use client';  // Next.js 13+ client component marker

import DateTimePicker from 'react-datetime-picker';
import { useEffect, useState } from 'react';

export function SSRDateTimePicker() {
  // Ensure locale matches between server and client
  const [mounted, setMounted] = useState(false);
  const [locale, setLocale] = useState('en-US');

  useEffect(() => {
    // Get actual browser locale on client
    setLocale(navigator.language);
    setMounted(true);
  }, []);

  if (!mounted) {
    // Return null or placeholder to prevent hydration mismatch
    return null;
  }

  return (
    <DateTimePicker
      locale={locale}
      format="yyyy-MM-dd HH:mm"
      value={null}
    />
  );
}
```

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

### File Organization Structure

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/README.md

Overview of the project's file organization, showing the structure of the output directory and related documentation files.

```plaintext
output/
├── README.md (this file)
├── types.md
├── configuration.md
├── format-reference.md
├── architecture.md
├── patterns-and-troubleshooting.md
└── api-reference/
    ├── DateTimePicker.md
    ├── DateTimeInput.md
    ├── NativeInput.md
    └── Utilities.md
```

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

### onInvalidChange Prop Example

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the user picks an invalid datetime. Use this for error handling or user feedback on invalid input.

```javascript
() => alert('Invalid datetime')
```

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

### Optional Portal Rendering Strategy

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/architecture.md

Demonstrates how Calendar and Clock widgets can be optionally rendered using React Portals. This helps in overcoming CSS limitations like overflow and z-index issues.

```javascript
DateTimePicker render:
  ↓
  Input field (always DOM children)
  ↓
  createPortal(
    Calendar/Clock widget,
    portalContainer || document.body
  )
```

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

### Example Usage of LooseValue Type

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Illustrates how to use the LooseValue type for setting the value prop of the DateTimePicker component with single values or ranges.

```tsx
// Single value
<DateTimePicker value={new Date()} />
<DateTimePicker value="2024-06-10T14:30:00" />
<DateTimePicker value={null} />

// Range (only first value is used)
<DateTimePicker value={[new Date(), new Date()]} />
<DateTimePicker value={["2024-06-10T14:30:00", "2024-06-11T15:45:00"]} />
```

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

### Time Conversion and Range Utilities

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/Utilities.md

Demonstrates unit tests for time conversion (12-hour to 24-hour and vice versa), range clamping, and AM/PM label retrieval. These functions are used by DateTimeInput and DateTimePicker components.

```tsx
import { convert12to24, convert24to12, between, getAmPmLabels } from 'react-datetime-picker/shared';

// Unit tests
test('convert12to24 handles midnight', () => {
  expect(convert12to24('12', 'am')).toBe(0);
});

test('convert24to12 handles noon', () => {
  const [hour, period] = convert24to12(12);
  expect([hour, period]).toEqual([12, 'pm']);
});

test('between clamps to max', () => {
  const max = new Date('2024-12-31');
  const value = new Date('2025-06-15');
  expect(between(value, undefined, max)).toEqual(max);
});

test('getAmPmLabels detects locale', () => {
  const [am, pm] = getAmPmLabels('en-US');
  expect([am, pm]).toBeDefined();
});
```

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

### Format String Parsing for Input Fields

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/architecture.md

Demonstrates how a format string like 'dd/MM/yyyy HH:mm:ss' is parsed into individual input fields (day, month, year, etc.) and dividers, enabling the creation of corresponding input components.

```text
format prop: "dd/MM/yyyy HH:mm:ss"
    ↓
Regex parse: ['dd', 'MM', 'yyyy', 'HH', 'mm', 'ss']
    ↓
Generate input fields for: [day, month, year, hour, minute, second]
    ↓
Generate dividers: ["/", "/", " ", ":", ":"]
    ↓
Render: <DayInput /> "/" <MonthInput /> "/" <YearInput /> " " <HourInput /> ":" ...
```

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

### Define Range Generic Type

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

A generic tuple type representing a start and end value pair. It is used to define ranges for values.

```typescript
type Range<T> = [T, T];
```

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

### Common Separators in Date and Time Formatting

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/format-reference.md

Illustrates the usage of common separators like '/', '-', '.', ':', ' ' (space), ',', and 'T' in date and time format strings.

```string
`MM/dd/yyyy` → 06/15/2024
```

```string
`yyyy-MM-dd` → 2024-06-15
```

```string
`dd.MM.yyyy` → 15.06.2024
```

```string
`HH:mm:ss` → 14:30:45
```

```string
`yyyy-MM-dd HH:mm` → 2024-06-15 14:30
```

```string
`MMMM d, yyyy` → June 15, 2024
```

```string
`yyyy-MM-dd'T'HH:mm:ss` → 2024-06-15T14:30:45
```

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

### API Reference Documentation

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/GENERATION_REPORT.txt

This section details the API reference documentation generated for the react-datetime-picker project, covering its main components, input components, internal components, and utility functions.

```APIDOC
## API Reference

This section details the API reference documentation generated for the react-datetime-picker project, covering its main components, input components, internal components, and utility functions.

### Components

- **DateTimePicker**: Main component API documentation.
- **DateTimeInput**: Input component API documentation (secondary export).
- **NativeInput**: Internal component API documentation (form support).
- **Divider**: Internal separator component API documentation.

### Exported Types

- **Value**: Type definition for date-time values.
- **LooseValue**: Type definition for loose date-time values.
- **LooseValuePiece**: Type definition for loose date-time value pieces.
- **Range<T>**: Generic type for date-time ranges.
- **Detail**: Type definition for detailed date-time information.
- **OpenReason**: Type definition for reasons a widget might open.
- **CloseReason**: Type definition for reasons a widget might close.
- **AmPmType**: Type definition for AM/PM indicator.
- **ClassName**: Type definition for CSS class names.
- **DateTimePickerProps**: Props for the DateTimePicker component.
- Includes 2 additional internal type definitions.

### Component Props

- Documentation for over 50 props of the DateTimePicker component.
- Includes full type signatures, default values, descriptions, and use cases.
- Cross-references to related props are provided.

### Callback Functions

- **onChange**: Signature and behavior documentation.
- **onInvalidChange**: Signature documentation.
- Documentation for widget open/close callbacks.
- Documentation for custom widget control callbacks.

### Internal Utilities

- **convert12to24**: Function for 12-hour to 24-hour time conversion.
- **convert24to12**: Function for 24-hour to 12-hour time conversion.
- **between**: Function for clamping dates within a range.
- **getAmPmLabels**: Function for locale-aware AM/PM labels.
- **getFormatter**: Function for date formatting with caching.
- **getNumberFormatter**: Function for number formatting with caching.
- **formatDate**: Convenience function for date formatting.
```

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

### Get Locale-Specific AM/PM Labels

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/Utilities.md

Detects and returns the appropriate AM and PM labels for a given locale. This ensures accurate time display across different regions.

```typescript
function getAmPmLabels(locale: string | undefined): [string, string]
```

```tsx
getAmPmLabels('en-US')   // Returns: ['AM', 'PM']
getAmPmLabels('de-DE')   // Returns: ['vorm.', 'nachm.'] (vorm. = before noon, nachm. = after noon)
getAmPmLabels('fr-FR')   // Returns: ['AM', 'PM'] (French uses AM/PM)
getAmPmLabels('ja-JP')   // Returns: ['午前', '午後'] (morning/afternoon)
getAmPmLabels(undefined) // Returns: labels for browser/server locale
```

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

### Importing All Types

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Shows how to import all exported types from the react-datetime-picker library in a single statement.

```typescript
import type {
  Value,
  LooseValue,
  LooseValuePiece,
  Range,
  Detail,
  OpenReason,
  CloseReason,
  AmPmType,
  ClassName,
  DateTimePickerProps,
} from 'react-datetime-picker';
```

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

### Importing Default Styles

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Import the default CSS for DateTimePicker, Calendar, and Clock components to apply their base styling. This is necessary if you want to build upon the default look.

```ts
import 'react-datetime-picker/dist/DateTimePicker.css';
import 'react-calendar/dist/Calendar.css';
import 'react-clock/dist/Clock.css';
```

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

### Arabic Date and Time Formats

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/format-reference.md

Examples of date-only and full datetime formats for Arabic (Saudi Arabia) locale. Note that the component does not automatically handle RTL rendering.

```tsx
// Date only
"dd/MM/yyyy"        // 15/06/2024

// Full datetime with 24-hour time
"dd/MM/yyyy HH:mm"           // 15/06/2024 14:30
// Note: Component does not automatically handle RTL rendering
```

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

### Optimize Performance with Limited Open Widgets

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

To mitigate performance degradation when rendering many pickers, limit the number of simultaneously open widgets. Use state to control which picker is open and manage its visibility.

```tsx
function MultiplePickersOptimized() {
  const [openWidget, setOpenWidget] = useState<string | null>(null);

  return (
    <>
      <DateTimePicker
        isCalendarOpen={openWidget === 'picker1'}
        shouldOpenWidgets={() => openWidget === null}
        shouldCloseWidgets={() => true}
        onCalendarOpen={() => setOpenWidget('picker1')}
        onCalendarClose={() => setOpenWidget(null)}
      />
      <DateTimePicker
        isCalendarOpen={openWidget === 'picker2'}
        shouldOpenWidgets={() => openWidget === null}
        shouldCloseWidgets={() => true}
        onCalendarOpen={() => setOpenWidget('picker2')}
        onCalendarClose={() => setOpenWidget(null)}
      />
    </>
  );
}
```

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

### onInvalidChange

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/packages/react-datetime-picker/README.md

This prop is a function that gets called when the user attempts to input an invalid date or time. It's useful for providing feedback or handling invalid user input.

```APIDOC
## onInvalidChange

### Description
Function called when the user picks an invalid datetime.

### Parameters
This prop does not accept any parameters.

### Example
```javascript
<DateTimePicker
  onInvalidChange={() => alert('Invalid datetime')}
/>
```
```

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

### onCalendarOpen

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/packages/react-datetime-picker/README.md

This prop is a function that gets called when the calendar widget of the datetime picker opens. It's useful for triggering actions or logging events when the calendar becomes visible.

```APIDOC
## onCalendarOpen

### Description
Function called when the calendar opens.

### Parameters
This prop does not accept any parameters.

### Example
```javascript
<DateTimePicker
  onCalendarOpen={() => alert('Calendar opened')}
/>
```
```

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

### autoFocus

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

When set to true, the input will automatically receive focus when the component mounts.

```APIDOC
## autoFocus

### Description
Automatically focuses the input on mount.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Package Export Configuration

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/exports-index.md

This JSON configuration defines how the package is exported, enabling default and secondary imports for components.

```json
{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./dist/DateTimeInput": "./dist/DateTimeInput.js"
  }
}
```

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

### Configure Date Return Value

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

The `returnValue` prop determines the format of the date passed to `onChange` and `onClick{Period}` functions. It can be set to 'start', 'end', or 'range' for array output.

```javascript
"range"
```

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

### Event Propagation Flow

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/architecture.md

Illustrates the sequence of events from user interaction to component re-rendering, facilitated by the `make-event-props` utility.

```text
User action (click, focus, keydown, etc.)
    ↓
Browser event fires on DOM element
    ↓
EventProps handler attached by make-event-props
    ↓
Handler logic in DateTimePicker/DateTimeInput
    ↓
State updates and/or prop callbacks fired
    ↓
Component re-renders with new state
```

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

### Date Tokens Reference

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/format-reference.md

Reference for date format tokens like year (y, yy, yyy, yyyy), day (d, dd), and month (M, MM, MMM, MMMM).

```markdown
| Token | Description | Example Values |
|-------|-------------|-----------------|
| `y` | Year, any length | 2024, 24 |
| `yy` | Year, 2 digits | 24, 04 |
| `yyy` | Year, 3 digits | 024, 024 |
| `yyyy` | Year, 4 digits | 2024, 0024 |
| `d` | Day of month | 5, 15, 31 |
| `dd` | Day of month, 2 digits | 05, 15, 31 |
| `M` | Month | 1, 12 |
| `MM` | Month, 2 digits | 01, 12 |
| `MMM` | Month abbreviation | Jan, Feb, Mar, Dec |
| `MMMM` | Month name | January, February, December |
```

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

### Custom Clock Behavior via clockProps

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Customize React-Clock specific options by passing them via the `clockProps` prop to DateTimePicker. This example shows how to set the number of hour marks displayed on the clock.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function CustomClockPicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      clockProps={{
        // React-Clock specific options
        hourMarksLength: 12,  // Number of hour marks
      }}
    />
  );
}
```

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

### Enforce Min/Max Dates Correctly

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

When setting minDate or maxDate, ensure they represent the start of the day to avoid unexpected behavior due to time components. Use a consistent timezone for date comparisons.

```tsx
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

// ❌ If today is currently 3 PM, minDate is already in the past
<DateTimePicker minDate={today} />

// ✅ Set to start of day
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
<DateTimePicker minDate={startOfToday} />
```

```tsx
// ❌ Date comparison may fail due to timezone
const minDate = new Date('2024-06-15');  // UTC

// ✅ Use consistent timezone
const minDate = new Date();
minDate.setFullYear(2024, 5, 15);  // June 15, 2024 in local time
```

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

### DateTimePicker with Custom Icons and Styling

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimePicker.md

Shows how to replace default icons with custom characters and apply custom CSS classes. Sets '✕' for clear icon and '📅' for calendar icon.

```tsx
import DateTimePicker from 'react-datetime-picker';

function CustomIconPicker() {
  return (
    <DateTimePicker
      clearIcon="✕"
      calendarIcon="📅"
      className="my-custom-picker"
      value={new Date()}
    />
  );
}
```

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

### onCalendarOpen

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the calendar opens. This prop accepts a callback function that will be executed upon the calendar's opening.

```APIDOC
## onCalendarOpen

### Description
Function called when the calendar opens.

### Parameters
This prop accepts a callback function.

### Example
```javascript
() => alert('Calendar opened')
```
```

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

### Troubleshooting: Calendar/Clock Not Opening

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

Addresses issues where the calendar or clock widgets do not appear when expected. This includes checking `disableCalendar`, `disableClock`, `shouldOpenWidgets`, and `openWidgetsOnFocus` properties.

```tsx
// ❌ Won't show calendar
<DateTimePicker disableCalendar={true} />

// ✅ Correct
<DateTimePicker disableCalendar={false} />

```

```tsx
// ❌ Prevents all opens
<DateTimePicker shouldOpenWidgets={() => false} />

// ✅ Correct
<DateTimePicker
  shouldOpenWidgets={({ reason, widget }) => {
    return reason === 'buttonClick';  // Only button clicks
  }}
/>

```

```tsx
// ❌ Can't open widget if no button and openWidgetsOnFocus=false
<DateTimePicker openWidgetsOnFocus={false} calendarIcon={null} />

// ✅ Provide alternate way to open
<DateTimePicker calendarIcon="📅" openWidgetsOnFocus={false} />

```

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

### Filtered Options (Manual Implementation)

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

Manually implement filtering for DateTimePicker to restrict selections to specific business hours (weekdays, 9 AM - 5 PM). This example demonstrates custom validation logic within the `onChange` handler.

```tsx
import { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function FilteredTimePicker() {
  const [value, setValue] = useState<Date | null>(null);

  // Business hours: 9 AM - 5 PM, Monday-Friday
  const isValidTime = (date: Date): boolean => {
    const hour = date.getHours();
    const day = date.getDay();

    // Monday = 1, Friday = 5, exclude weekends (0 = Sunday, 6 = Saturday)
    const isWeekday = day >= 1 && day <= 5;

    // 9 AM to 5 PM
    const isBusinessHours = hour >= 9 && hour < 17;

    return isWeekday && isBusinessHours;
  };

  const handleChange = (newValue: Date | null) => {
    if (newValue && !isValidTime(newValue)) {
      alert('Please select a weekday between 9 AM and 5 PM');
      return;
    }
    setValue(newValue);
  };

  const today = new Date();
  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());

  return (
    <DateTimePicker
      value={value}
      onChange={handleChange}
      minDate={today}
      maxDate={nextMonth}
      maxDetail="minute"
    />
  );
}

```

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

### Define OpenReason Type

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Enumeration of reasons why a widget (calendar or clock) is opening. It can be 'buttonClick' or 'focus'.

```typescript
type OpenReason = 'buttonClick' | 'focus';
```

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

### Handle SSR Hydration Mismatch with Client-Side Locale

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/patterns-and-troubleshooting.md

For SSR frameworks like Next.js, ensure consistent locale by setting it on the client using `useEffect`. This example uses the 'use client' directive for Next.js 13+ App Router.

```tsx
'use client';  // Next.js 13+ App Router

import { useEffect, useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function SSRDateTimePicker() {
  const [mounted, setMounted] = useState(false);
  const [locale, setLocale] = useState('en-US');

  useEffect(() => {
    // Set locale to actual browser locale on client
    setLocale(navigator.language);
    setMounted(true);
  }, []);

  // Don't render on server to avoid mismatch
  if (!mounted) return null;

  return (
    <DateTimePicker
      locale={locale}
      format="yyyy-MM-dd HH:mm"
      value={null}
    />
  );
}
```

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

### Constraining Detail Level with maxDetail

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Illustrates how to use the `maxDetail` prop to control the level of detail (e.g., year, month, day, hour, minute, second) displayed in the picker.

```tsx
import DateTimePicker from 'react-datetime-picker';
import type { Detail } from 'react-datetime-picker';

function TimePickerConfig({ precision }: { precision: Detail }) {
  return (
    <DateTimePicker
      maxDetail={precision}
      value={new Date()}
    />
  );
}

// Usage:
<TimePickerConfig precision="second" />
```

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

### Time Tokens Reference

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/format-reference.md

Reference for time format tokens including hour (H, HH, h, hh), minute (m, mm), second (s, ss), and AM/PM indicator (a).

```markdown
| Token | Description | Example Values |
|-------|-------------|-----------------|
| `H` | Hour (24-hour) | 0, 5, 23 |
| `HH` | Hour (24-hour), 2 digits | 00, 05, 23 |
| `h` | Hour (12-hour) | 1, 5, 12 |
| `hh` | Hour (12-hour), 2 digits | 01, 05, 12 |
| `m` | Minute | 0, 5, 59 |
| `mm` | Minute, 2 digits | 00, 05, 59 |
| `s` | Second | 0, 5, 59 |
| `ss` | Second, 2 digits | 00, 05, 59 |
| `a` | AM/PM | AM, PM |
```

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

### Widget Control with Type Safety

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/types.md

Shows how to implement type-safe control over widget opening and closing using `shouldOpenWidgets` and `shouldCloseWidgets` callbacks.

```tsx
import DateTimePicker from 'react-datetime-picker';
import type { OpenReason, CloseReason } from 'react-datetime-picker';

function SmartDateTimePicker() {
  return (
    <DateTimePicker
      shouldOpenWidgets={({ reason, widget }: { reason: OpenReason; widget: string }) => {
        return reason === 'buttonClick';
      }}
      shouldCloseWidgets={({ reason, widget }: { reason: CloseReason; widget: string }) => {
        return reason !== 'outsideAction';
      }}
    />
  );
}
```

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

### onClockOpen

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Function called when the clock opens. This prop accepts a callback function that is triggered when the clock interface is opened.

```APIDOC
## onClockOpen

### Description
Function called when the clock opens.

### Parameters
This prop accepts a callback function.

### Example
```javascript
() => alert('Clock opened')
```
```

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

### DateTimeInput with Min/Max Constraints and Invalid Handler

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimeInput.md

Demonstrates setting minimum and maximum allowable dates for the input using 'minDate' and 'maxDate' props. It also includes an 'onInvalidChange' handler for invalid user input.

```tsx
import DateTimeInput from 'react-datetime-picker/dist/DateTimeInput';

function ConstrainedDateTimeInput() {
  const [value, setValue] = useState<Date | null>(null);
  const today = new Date();
  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1);

  return (
    <DateTimeInput
      className="constrained-input"
      value={value}
      minDate={today}
      maxDate={nextMonth}
      onChange={(newValue) => setValue(newValue)}
      onInvalidChange={() => alert('Invalid datetime entered')}
    />
  );
}
```

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

### openWidgetsOnFocus

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/README.md

Whether to open the widgets on input focus. It's recommended to use `shouldOpenWidgets` function instead. This prop is a boolean value.

```APIDOC
## openWidgetsOnFocus

### Description
Whether to open the widgets on input focus. **Note**: It's recommended to use `shouldOpenWidgets` function instead.

### Parameters
- **openWidgetsOnFocus** (boolean) - Optional - Controls if widgets open on focus.

### Default Value
`true`

### Example
```javascript
false
```
```

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

### Intl Formatter Caching Strategy

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/architecture.md

Explains the caching mechanism for Intl.DateTimeFormat instances. Subsequent calls with the same locale and options retrieve a cached formatter function, providing O(1) lookup performance.

```text
getFormatter({ month: 'long' })
    ↓
Check formatterCache for this locale + options
    ↓
If cached: return cached formatter function
    ↓
If not cached: create new Intl.DateTimeFormat
    ↓
Cache it
    ↓
Return formatter function
    ↓
Future calls with same locale + options hit cache (O(1))
```

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

### DateTimePicker with Min/Max Date Constraints

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimePicker.md

Illustrates setting minimum and maximum allowable dates for the DateTimePicker. Calculates today's date and a date one week from now for constraints.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function ConstrainedPicker() {
  const [value, setValue] = useState<Date | null>(null);
  const today = new Date();
  const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

  return (
    <DateTimePicker
      minDate={today}
      maxDate={nextWeek}
      onChange={setValue}
      value={value}
    />
  );
}
```

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

### Create a locale-aware year-month formatter

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/Utilities.md

Use `getFormatter` with appropriate options to create a function that formats both the year and month. This formatter is cached.

```typescript
const yearMonthFormatter = getFormatter({ year: 'numeric', month: '2-digit' });
yearMonthFormatter('en-US', new Date(2024, 5))  // Returns: '06/2024'
yearMonthFormatter('de-DE', new Date(2024, 5))  // Returns: '06/2024'
```

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

### Configure Format String by Locale

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/configuration.md

Define custom date and time format strings for different locales to ensure correct display. A default format is applied if the locale is not found in the provided formats.

```tsx
const formats = {
  'en-US': 'MM/dd/yyyy h:mm a',
  'en-GB': 'dd/MM/yyyy HH:mm',
  'de-DE': 'dd.MM.yyyy HH:mm',
  'fr-FR': 'dd/MM/yyyy HH:mm',
  'es-ES': 'dd/MM/yyyy HH:mm',
  'it-IT': 'dd/MM/yyyy HH:mm',
  'ja-JP': 'yyyy/MM/dd HH:mm',
  'zh-CN': 'yyyy/MM/dd HH:mm',
  'ar-SA': 'dd/MM/yyyy HH:mm',  // Note: component is not RTL-aware
};

export function LocalizedPicker({ locale }: { locale: string }) {
  return (
    <DateTimePicker
      locale={locale}
      format={formats[locale] || 'yyyy-MM-dd HH:mm'}
      value={new Date()}
    />
  );
}
```

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

### Implementing Locale-Based Format Auto-Detection

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/format-reference.md

Shows a method to dynamically set the date-time format based on the provided locale using a mapping object. If a locale is not found, a default format is applied.

```tsx
const formatByLocale: Record<string, string> = {
  'en-US': 'MM/dd/yyyy h:mm a',
  'en-GB': 'dd/MM/yyyy HH:mm',
  'de-DE': 'dd.MM.yyyy HH:mm',
  'fr-FR': 'dd/MM/yyyy HH:mm',
  'es-ES': 'dd/MM/yyyy HH:mm',
  'it-IT': 'dd/MM/yyyy HH:mm',
  'ja-JP': 'yyyy/MM/dd HH:mm',
  'zh-CN': 'yyyy/MM/dd HH:mm',
  'ko-KR': 'yyyy.MM.dd HH:mm',
};

export function LocalizedPicker({ locale }: { locale: string }) {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      locale={locale}
      format={formatByLocale[locale] || 'yyyy-MM-dd HH:mm'}
      value={value}
      onChange={setValue}
    />
  );
}
```

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

### DateTimeInput with Custom Format

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimeInput.md

Shows how to customize the date and time format displayed in the input field using the 'format' prop. It also enables leading zeros for better readability.

```tsx
import DateTimeInput from 'react-datetime-picker/dist/DateTimeInput';

function FormattedDateTimeInput() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimeInput
      className="formatted-input"
      value={value}
      format="dd/MM/yyyy HH:mm"
      onChange={setValue}
      showLeadingZeros={true}
    />
  );
}
```

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

### Primary Export from Index

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/architecture.md

Defines the main entry point for the DateTimePicker component and its associated props type. This is the default export.

```typescript
import DateTimePicker from './DateTimePicker.js';

export type { DateTimePickerProps } from './DateTimePicker.js';
export { DateTimePicker };

export default DateTimePicker;
```

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

### Basic DateTimePicker Usage with State

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimePicker.md

Demonstrates the fundamental usage of DateTimePicker with React state management. Imports useState and DateTimePicker. Sets an initial date value.

```tsx
import { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function App() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <div>
      <DateTimePicker onChange={setValue} value={value} />
      <p>Selected: {value?.toISOString()}</p>
    </div>
  );
}
```

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

### DateTimePicker with Custom Format and Locale

Source: https://github.com/wojtekmaj/react-datetime-picker/blob/main/_autodocs/api-reference/DateTimePicker.md

Shows how to customize the date and time format and set a specific locale for the DateTimePicker. Uses 'dd.MM.yyyy HH:mm:ss' format and 'de-DE' locale.

```tsx
import DateTimePicker from 'react-datetime-picker';

export function GermanDateTimePicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      format="dd.MM.yyyy HH:mm:ss"
      locale="de-DE"
      onChange={setValue}
      value={value}
    />
  );
}
```
Tokens:
Raw