# CustomTimeSelector

## Description

A Flatpickr plugin component that provides a custom time selection interface with dropdown functionality. It creates an enhanced time input field with a searchable time options dropdown, replacing the default Flatpickr time picker with a more user-friendly time selection experience.

## Aliases

- CustomTimeSelector
- TimeDropdownPlugin
- TimePickerPlugin
- CustomTimePicker

## Props Breakdown

**Type:** Flatpickr Plugin Function

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

## Examples

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

function TimePickerExample() {
  return (
    <DatePicker
      plugins={[customTimeSelector({ minuteStep: 15 })]}
      enableTime={true}
      noCalendar={true}
      dateFormat="h:i K"
    />
  );
}
```

### Custom Minute Steps
```tsx
function CustomStepsExample() {
  return (
    <div className="time-pickers">
      {/* 15-minute intervals */}
      <DatePicker
        plugins={[customTimeSelector({ minuteStep: 15 })]}
        enableTime={true}
        noCalendar={true}
        placeholder="Select time (15 min steps)"
      />
      
      {/* 5-minute intervals */}
      <DatePicker
        plugins={[customTimeSelector({ minuteStep: 5 })]}
        enableTime={true}
        noCalendar={true}
        placeholder="Select time (5 min steps)"
      />
      
      {/* 1-hour intervals */}
      <DatePicker
        plugins={[customTimeSelector({ minuteStep: 60 })]}
        enableTime={true}
        noCalendar={true}
        placeholder="Select time (hourly)"
      />
    </div>
  );
}
```

### With Date and Time
```tsx
function DateTimeExample() {
  return (
    <DatePicker
      plugins={[customTimeSelector({ minuteStep: 30 })]}
      enableTime={true}
      dateFormat="m/d/Y h:i K"
      placeholder="Select date and time"
    />
  );
}
```

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

function FormTimeExample() {
  const handleSubmit = (values) => {
    console.log('Selected time:', values.appointmentTime);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField 
        name="appointmentTime" 
        label="Appointment Time" 
        required
      >
        <DatePicker
          plugins={[customTimeSelector({ minuteStep: 15 })]}
          enableTime={true}
          noCalendar={true}
          dateFormat="h:i K"
          placeholder="Select appointment time"
        />
      </FormField>
    </Form>
  );
}
```