Taymify

Taymify is a lightweight cascading time picker for start and end times. It automatically populates end times based on the selected start time, supports custom intervals, minimum/maximum durations, disabled times, date selection, and duration selectors. Perfect for booking systems, meeting rooms, reservation apps, or scheduling tools.

Installation

npm install taymify

Basic Usage

import Taymify from "taymify";

new Taymify({
  start: "#start",
  end: "#end"
});

<input type="date" id="date">
<select id="start"></select>
<select id="end"></select>

Configuration Options

| Option | Description | Default | |---|---|---| | start | CSS selector for start time select | required | | end | CSS selector for end time select | required | | date | CSS selector for date input (optional) | null | | durationSelect | CSS selector for duration dropdown (optional) | null | | startHour | Earliest hour available | 0 | | endHour | Latest hour available | 23 | | interval | Minutes between each time slot | 30 | | minDuration | Minimum duration in minutes between start and end | 30 | | maxDuration | Maximum duration in minutes (optional) | null | | hidePast | Hide past times if selected date is today | false | | format | Time format: "12h" or "24h" | "12h" | | autoSelectEnd | Automatically select first valid end time | true | | disabled | Array of time strings to disable | [] | | onChange | Callback (start, end) | null | | onStartChange | Callback (start) | null | | onEndChange | Callback (end) | null |

Examples

Hide past times and set custom range

new Taymify({
  start: "#start",
  end: "#end",
  date: "#date",
  startHour: 8,
  endHour: 20,
  interval: 30,
  hidePast: true
});

Minimum and maximum duration

new Taymify({
  start: "#start",
  end: "#end",
  minDuration: 30,
  maxDuration: 120
});

Disabled time slots

new Taymify({
  start: "#start",
  end: "#end",
  disabled: ["12:00 PM", "1:00 PM"]
});

You can also update disabled times dynamically:

const picker = new Taymify({ start: "#start", end: "#end" });
picker.setDisabled(["10:00 AM", "11:00 AM"]);

Duration selector integration

<select id="duration">
  <option value="30">30 minutes</option>
  <option value="60">1 hour</option>
</select>

new Taymify({
  start: "#start",
  end: "#end",
  durationSelect: "#duration"
});

Selecting a start time and a duration will automatically set the end time.

Callbacks

new Taymify({
  start: "#start",
  end: "#end",

  onChange(start, end) {
    console.log("Start:", start, "End:", end);
  },

  onStartChange(start) {
    console.log("Start changed:", start);
  },

  onEndChange(end) {
    console.log("End changed:", end);
  }
});

Destroy Instance

Remove all event listeners:

const picker = new Taymify({ start: "#start", end: "#end" });
picker.destroy();

Features

• Cascading start/end time selection
• Configurable time range and intervals
• Minimum/maximum duration support
• Hide past times
• Disabled slots & dynamic setDisabled()
• Duration selector support
• Date integration
• Multiple instances support
• Event callbacks: onChange, onStartChange, onEndChange
• Destroyable instance
• Lightweight and dependency-free

License

MIT