I need a jQuery timepicker plugin

[SurajkaliMotiar]

Hi
I am building a booking system for which i need to block out certain times on specific dates. For that I need a plugin that must disable specific times using an array. Any suggestions!!!

[Sodah73]

Hello, you can use: Flatpickr

Example:

<input id="datetime-picker" type="text">

<script>
  // Array with disabled times and days
  const disabledTimes = [
    { day: "2024-12-25", times: ["10:00", "14:00"] }, // Christmas: closed between 10:00 and 14:00
    { day: "2024-12-31", times: ["18:00", "22:00"] }  // New Year's Eve: closed between 6:00 p.m. and 10:00 p.m.
  ];


  function isTimeDisabled(date) {
    const formattedDate = date.toISOString().split("T")[0]; 
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    const time = `${hours}:${minutes}`;

    return disabledTimes.some(disabled =>
      disabled.day === formattedDate && disabled.times.includes(time)
    );
  }


  flatpickr("#datetime-picker", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    minuteIncrement: 30,
    disable: [
      function(date) {
        return isTimeDisabled(date);
      }
    ]
  });
</script>​ 

[lewishall]

I recommend jQuery Timepicker by Trent Richardson. It’s lightweight, widely used, and allows you to set disabled times via an array. You can define an array of time ranges or specific times to disable, which fits your requirement perfectly. Here’s a quick example of how you might use it:

$('#timepicker').timepicker({
    timeFormat: 'H:i',
    minTime: '8:00',
    maxTime: '18:00',
    disableTimeRanges: [
        ['10:00', '11:30'], // Blocked range
        ['14:00', '15:00']  // Another blocked range
    ]
});​

Good luck!

Chill Guy Game