Elige una Franja Horaria

Las fechas no son suficientes — los clientes necesitan elegir una hora específica. Un dropdown con las franjas horarias disponibles es más limpio que un campo de hora de formato libre. Vamos a construirlo con el binding de select de Svelte.

Lo que Aprenderás

Enlazar elementos select con bind:value
Generar opciones de franjas horarias dinámicamente
Manejar selecciones vacías o de marcador de posición
Formatear horas para mostrarlas

Binding Básico de Select

Los selects funcionan igual que los inputs de texto:

<script>
  let selectedTime = $state('');
</script>

<label for="booking-time">Preferred Time</label>
<select id="booking-time" bind:value={selectedTime}>
  <option value="">Choose a time...</option>
  <option value="09:00">9:00 AM</option>
  <option value="10:00">10:00 AM</option>
  <option value="11:00">11:00 AM</option>
  <option value="14:00">2:00 PM</option>
  <option value="15:00">3:00 PM</option>
</select>

<p>Selected: {selectedTime || 'None'}</p>

El valor enlazado coincide con el atributo value de la opción seleccionada.

Generar Franjas Horarias

Codificar las opciones manualmente se vuelve tedioso. Genéralas dinámicamente:

<script>
  let selectedTime = $state('');
  
  // Generate time slots from 9 AM to 5 PM
  function generateTimeSlots() {
    const slots = [];
    for (let hour = 9; hour < 17; hour++) {
      slots.push({
        value: `${hour.toString().padStart(2, '0')}:00`,
        label: formatTime(hour, 0)
      });
      // Add 30-minute slots
      slots.push({
        value: `${hour.toString().padStart(2, '0')}:30`,
        label: formatTime(hour, 30)
      });
    }
    return slots;
  }
  
  function formatTime(hour, minute) {
    const period = hour >= 12 ? 'PM' : 'AM';
    const displayHour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
    const displayMinute = minute.toString().padStart(2, '0');
    return `${displayHour}:${displayMinute} ${period}`;
  }
  
  const timeSlots = generateTimeSlots();
</script>

<label for="booking-time">Preferred Time</label>
<select id="booking-time" bind:value={selectedTime} required>
  <option value="">Choose a time...</option>
  {#each timeSlots as slot}
    <option value={slot.value}>{slot.label}</option>
  {/each}
</select>

Ahora tienes 16 franjas horarias (de 9 AM a 4:30 PM, cada 30 minutos) sin HTML manual.

Deshabilitar Franjas No Disponibles

Algunas horas pueden estar reservadas. Márcalas como no disponibles:

<script>
  let selectedTime = $state('');
  
  // Simulated booked times (would come from server)
  const bookedTimes = ['10:00', '14:00', '14:30'];
  
  const timeSlots = generateTimeSlots().map(slot => ({
    ...slot,
    disabled: bookedTimes.includes(slot.value)
  }));
</script>

<select id="booking-time" bind:value={selectedTime} required>
  <option value="">Choose a time...</option>
  {#each timeSlots as slot}
    <option value={slot.value} disabled={slot.disabled}>
      {slot.label}{slot.disabled ? ' (Unavailable)' : ''}
    </option>
  {/each}
</select>

Las opciones deshabilitadas no pueden seleccionarse y aparecen en gris.

Mostrar Franjas Disponibles

Ayuda a los clientes a ver la disponibilidad de un vistazo:

<script>
  let selectedTime = $state('');
  const bookedTimes = ['10:00', '14:00', '14:30'];
  
  const timeSlots = generateTimeSlots();
  
  let availableCount = $derived(
    timeSlots.filter(slot => !bookedTimes.includes(slot.value)).length
  );
</script>

<label for="booking-time">
  Preferred Time 
  <span class="availability">({availableCount} slots available)</span>
</label>
<select id="booking-time" bind:value={selectedTime} required>
  <!-- options... -->
</select>

<style>
  .availability {
    font-weight: normal;
    color: #666;
    font-size: 0.875rem;
  }
</style>

Integrar con la Selección de Fecha

La disponibilidad de horarios depende de la fecha seleccionada:

<script>
  let bookingDate = $state('');
  let selectedTime = $state('');
  
  // Reset time when date changes
  $effect(() => {
    if (bookingDate) {
      selectedTime = ''; // Clear time selection
    }
  });
  
  // In a real app, fetch availability from server
  function getBookedTimesForDate(date) {
    // Simulated — different days have different bookings
    const bookings = {
      '2025-06-15': ['10:00', '11:00'],
      '2025-06-16': ['14:00', '15:00', '15:30'],
    };
    return bookings[date] || [];
  }
  
  let bookedTimes = $derived(getBookedTimesForDate(bookingDate));
</script>

<div class="field">
  <label for="booking-date">Date</label>
  <input type="date" id="booking-date" bind:value={bookingDate} required />
</div>

<div class="field">
  <label for="booking-time">Time</label>
  <select 
    id="booking-time" 
    bind:value={selectedTime} 
    disabled={!bookingDate}
    required
  >
    <option value="">
      {bookingDate ? 'Choose a time...' : 'Select a date first'}
    </option>
    {#each timeSlots as slot}
      <option 
        value={slot.value} 
        disabled={bookedTimes.includes(slot.value)}
      >
        {slot.label}
      </option>
    {/each}
  </select>
</div>

El dropdown de hora está deshabilitado hasta que se seleccione una fecha, luego muestra la disponibilidad para ese día específico.

Selección de Hora Completa

Aquí está el campo de selección de hora terminado:

<!-- filename: src/lib/components/BookingForm.svelte (partial) -->
<script>
  let bookingDate = $state('');
  let selectedTime = $state('');
  
  function generateTimeSlots() {
    const slots = [];
    for (let hour = 9; hour < 17; hour++) {
      for (let minute of [0, 30]) {
        const value = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        const period = hour >= 12 ? 'PM' : 'AM';
        const displayHour = hour > 12 ? hour - 12 : hour;
        const label = `${displayHour}:${minute.toString().padStart(2, '0')} ${period}`;
        slots.push({ value, label });
      }
    }
    return slots;
  }
  
  const timeSlots = generateTimeSlots();
  
  // Simulated availability
  const bookedTimes = ['10:00', '14:00'];
</script>

<fieldset>
  <legend>Appointment Details</legend>
  
  <div class="field">
    <label for="booking-date">Preferred Date</label>
    <input 
      type="date" 
      id="booking-date"
      bind:value={bookingDate}
      required
    />
  </div>
  
  <div class="field">
    <label for="booking-time">Preferred Time</label>
    <select 
      id="booking-time" 
      name="bookingTime"
      bind:value={selectedTime}
      disabled={!bookingDate}
      required
    >
      <option value="">
        {bookingDate ? 'Choose a time...' : 'Select a date first'}
      </option>
      {#each timeSlots as slot}
        <option 
          value={slot.value} 
          disabled={bookedTimes.includes(slot.value)}
        >
          {slot.label}{bookedTimes.includes(slot.value) ? ' (Booked)' : ''}
        </option>
      {/each}
    </select>
  </div>
</fieldset>

<style>
  select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background: white;
  }
  
  select:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }
  
  option:disabled {
    color: #999;
  }
</style>

Errores Comunes

Olvidar la Opción Vacía

<!-- ❌ No way to show "nothing selected" -->
<select bind:value={time}>
  <option value="09:00">9:00 AM</option>
</select>

<!-- ✅ Include placeholder option -->
<select bind:value={time}>
  <option value="">Choose a time...</option>
  <option value="09:00">9:00 AM</option>
</select>

Incompatibilidad de Tipo en el Valor

<script>
  let selectedHour = $state(0); // Number
</script>

<!-- ❌ Option values are strings -->
<select bind:value={selectedHour}>
  <option value="9">9 AM</option>
</select>

<!-- ✅ Match the type -->
<select bind:value={selectedHour}>
  <option value={9}>9 AM</option>
</select>

Los valores de las opciones son strings por defecto. Usa value={number} para el binding numérico.

Resumen

Los elementos select se enlazan con bind:value igual que los inputs de texto. Genera opciones dinámicamente con {#each}, deshabilita las opciones no disponibles y coordina con otros campos del formulario usando effects.

Puntos clave:

bind:value en selects funciona como en inputs de texto
Genera opciones con bucles {#each}
Usa disabled en las opciones para franjas no disponibles
Coordina dropdowns dependientes con $effect

Próximos Pasos

La fecha y la hora están configuradas. Continúa con Selección de Servicio con bind:group para permitir que los clientes elijan qué servicio desean.