A time picker for any form, in any framework.

<script type="module" src="https://cdn.jsdelivr.net/npm/picktime/+esm"></script>

<form>
  <label for="start">Start</label>
  <pick-time id="start" name="start" value="09:30"></pick-time>
  <button>Submit</button>
</form>

Nothing else. The form submits start=09:30.

import 'picktime';
import { useState } from 'react';

export function Booking() {
  const [time, setTime] = useState('09:30');

  return (
    <pick-time
      name="start"
      value={time}
      min="09:00"
      max="17:00"
      onChange={e => setTime(e.target.value)}
    />
  );
}

React 19+ passes props and listeners to custom elements natively. On React 18 use a ref to set value and attach the change listener.

// vite.config.js
vue({
  template: {
    compilerOptions: { isCustomElement: tag => tag === 'pick-time' }
  }
})

<script setup>
import 'picktime';
import { ref } from 'vue';
const time = ref('09:30');
</script>

<template>
  <pick-time name="start" :value="time"
             @change="time = $event.target.value" />
</template>

<script>
  import 'picktime';
  let time = $state('09:30');
</script>

<pick-time
  name="start"
  value={time}
  onchange={e => (time = e.target.value)}
/>

No configuration needed.

import 'picktime';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <pick-time name="start" [value]="time"
               (change)="time = $any($event.target).value">
    </pick-time>
  `
})
export class BookingComponent { time = '09:30'; }