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:


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.

  defaultDate:convertDateObjectToFormat(new Date(),'YYYY-MM-DD'),

6. Occasion handlers.

  // do one thing

  // 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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments