Time Selection Made Esay - jQuery Time Slot Picker

Time Slot Picker is a lightweight and user-friendly jQuery time picker plugin that divides the day into multiple time slots at specified intervals (defaults to 15 minutes). So that users can quickly choose a desired time with a single click.

The plugin supports custom min/max times for selection, which can be useful in scenarios where users need to pick from working hours while non-working hours remain disabled. 

How to use it:

1. Include the Time Slot Picker's script and the latest jQuery library in your HTML file:

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/time_slot_picker.js"></script>

2. Create an input field to capture the selected time:

<input id="time-slot-input" />

3. Create a DIV container where the time slot picker will be displayed:

<div id="time-slot-picker"></div>

4. Call the timeSlotPicker function on the DIV container and specify the input element selector:

$('#time-slot-picker').timeSlotPicker({
  inputElementSelector:'#time-slot-input'
});

5. Available plugin options to customize the time picker.

• startTime: The start time for the time slot selection range.
• endTime: The end time for the time slot selection range.
• timeStep: The interval (in minutes) between each time slot.
• defaultDate: The default date to display time slots for.
• maxDateTime: The maximum date and time that can be selected.
• minDateTime: The minimum date and time that can be selected.
• minDayTime: The minimum time of day that can be selected.
• maxDayTime: The maximum time of day that can be selected.
• skipWeekends: Whether to skip weekends (Saturday and Sunday) in the time slot selection.
• inputElementSelector: The selector for the input element where the selected time will be populated.

$('#time-slot-picker').timeSlotPicker({
  startTime:'00:00',
  endTime:'24:00',
  timeStep:'15',
  minDateTime:null,
  maxDateTime:null,
  minDayTime:null,
  maxDayTime:null,
  skipWeekends:false,
  defaultDate:convertDateObjectToFormat(new Date(),'YYYY-MM-DD'),
  inputElementSelector:null
});

6. Event handlers.

$('#time-slot-input').on('timeSlotSelected',function(){
  // do something
});

$('#time-slot-input').on('timeSlotDiscarded',function(){
  // do something
});

---

This awesome jQuery plugin is developed by sanmark. For more Advanced Usages, please check the demo page or visit the official website.