Time Choice Made Esay – jQuery Time Slot Picker

Time Slot Picker is a light-weight and user-friendly jQuery time picker plugin that divides the day into a number of time slots at specified intervals (defaults to fifteen minutes). In order that customers can shortly select a desired time with a single click on.

The plugin helps customized min/max instances for choice, which might be helpful in eventualities the place customers want to choose from working hours whereas non-working hours stay disabled. 

use it:

1. Embody the Time Slot Picker’s script and the newest 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 enter subject to seize the chosen time:

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

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

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

4. Name the timeSlotPicker operate on the DIV container and specify the enter aspect selector:

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

5. Obtainable plugin choices to customise the time picker.

• startTime: The beginning time for the time slot choice vary.
• endTime: The tip time for the time slot choice vary.
• timeStep: The interval (in minutes) between every time slot.
• defaultDate: The default date to show time slots for.
• maxDateTime: The utmost date and time that may be chosen.
• minDateTime: The minimal date and time that may be chosen.
• minDayTime: The minimal time of day that may be chosen.
• maxDayTime: The utmost time of day that may be chosen.
• skipWeekends: Whether or not to skip weekends (Saturday and Sunday) within the time slot choice.
• inputElementSelector: The selector for the enter aspect the place the chosen time will probably 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. Occasion handlers.

$('#time-slot-input').on('timeSlotSelected',operate(){
  // do one thing
});

$('#time-slot-input').on('timeSlotDiscarded',operate(){
  // do one thing
});

This superior jQuery plugin is developed by sanmark. For extra Superior Usages, please verify the demo web page or go to the official web site.