# DateTimeSelector

## Description

A Flatpickr plugin component that provides a combined date and time selection interface with a custom time input field and dropdown. It enhances the DatePicker component by adding a labeled time input section alongside the calendar, providing a comprehensive date-time selection experience.

## Aliases

- DateTimeSelector
- DateTimeDropdownPlugin
- DateTimePickerPlugin
- CombinedDateTimePicker

## Props Breakdown

**Type:** Flatpickr Plugin Function

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `config` | `CustomTimePickerConfig` | - | Yes | Configuration object for the date-time picker |
| `config.minuteStep` | `number` | `30` | No | Step interval for minute options in the time dropdown |

## Examples

### Basic Usage
```tsx
import { DatePicker } from '@delightui/components';
import dateTimeSelector from './Plugins/dateTimeSelector';

function DateTimePickerExample() {
  return (
    <DatePicker
      plugins={[dateTimeSelector({ minuteStep: 15 })]}
      enableTime={true}
      dateFormat="m/d/Y h:i K"
      placeholder="Select date and time"
    />
  );
}
```

### Different Time Intervals
```tsx
function TimeIntervalExample() {
  return (
    <div className="datetime-pickers">
      {/* 5-minute intervals */}
      <DatePicker
        plugins={[dateTimeSelector({ minuteStep: 5 })]}
        enableTime={true}
        dateFormat="m/d/Y h:i K"
        placeholder="Precise timing (5 min)"
      />
      
      {/* 30-minute intervals */}
      <DatePicker
        plugins={[dateTimeSelector({ minuteStep: 30 })]}
        enableTime={true}
        dateFormat="m/d/Y h:i K"
        placeholder="Standard timing (30 min)"
      />
      
      {/* 60-minute intervals */}
      <DatePicker
        plugins={[dateTimeSelector({ minuteStep: 60 })]}
        enableTime={true}
        dateFormat="m/d/Y h:i K"
        placeholder="Hourly timing"
      />
    </div>
  );
}
```

### Event Scheduling
```tsx
import { Form, FormField, DatePicker } from '@delightui/components';

function EventSchedulingExample() {
  const handleSubmit = (values) => {
    console.log('Event details:', {
      startTime: values.startDateTime,
      endTime: values.endDateTime,
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField 
        name="startDateTime" 
        label="Event Start" 
        required
      >
        <DatePicker
          plugins={[dateTimeSelector({ minuteStep: 15 })]}
          enableTime={true}
          dateFormat="m/d/Y h:i K"
          placeholder="Select start date and time"
        />
      </FormField>
      
      <FormField 
        name="endDateTime" 
        label="Event End" 
        required
      >
        <DatePicker
          plugins={[dateTimeSelector({ minuteStep: 15 })]}
          enableTime={true}
          dateFormat="m/d/Y h:i K"
          placeholder="Select end date and time"
        />
      </FormField>
    </Form>
  );
}
```

### Appointment Booking
```tsx
function AppointmentBookingExample() {
  const [selectedDateTime, setSelectedDateTime] = useState('');

  const handleDateTimeChange = (selectedDates) => {
    if (selectedDates.length > 0) {
      setSelectedDateTime(selectedDates[0].toLocaleString());
    }
  };

  return (
    <div className="appointment-booking">
      <h3>Book Your Appointment</h3>
      
      <DatePicker
        plugins={[dateTimeSelector({ minuteStep: 30 })]}
        enableTime={true}
        dateFormat="m/d/Y h:i K"
        placeholder="Select appointment date and time"
        onChange={handleDateTimeChange}
        minDate="today"
      />
      
      {selectedDateTime && (
        <div className="selected-time">
          <p>Selected appointment: {selectedDateTime}</p>
        </div>
      )}
    </div>
  );
}
```

### Range Date-Time Selection
```tsx
function RangeDateTimeExample() {
  return (
    <DatePicker
      plugins={[dateTimeSelector({ minuteStep: 30 })]}
      enableTime={true}
      mode="range"
      dateFormat="m/d/Y h:i K"
      placeholder="Select date range with times"
    />
  );
}
```