Sunday, July 21, 2024
HomejQueryTime Choice Made Esay - jQuery Time Slot Picker

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments