Escolha um Horário

Datas não são suficientes — os clientes precisam escolher um horário específico. Um dropdown com os horários disponíveis é mais limpo do que um campo de entrada de horário livre. Vamos construí-lo com o binding de select do Svelte.

O Que Você Vai Aprender

Fazer binding de elementos select com bind:value
Gerar opções de horário dinamicamente
Lidar com seleções vazias/placeholder
Formatar horários para exibição

Binding Básico de Select

Selects funcionam assim como 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>

O valor vinculado corresponde ao atributo value da opção selecionada.

Gerar Horários Disponíveis

Escrever as opções manualmente é tedioso. Gere-as dinamicamente:

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

Agora você tem 16 horários disponíveis (das 9h às 16h30, a cada 30 minutos) sem HTML manual.

Desabilitar Horários Indisponíveis

Alguns horários podem estar reservados. Marque-os como indisponíveis:

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

Opções desabilitadas não podem ser selecionadas e aparecem acinzentadas.

Exibir Vagas Restantes

Ajude os clientes a ver a disponibilidade rapidamente:

<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 com a Seleção de Data

A disponibilidade de horários depende da data selecionada:

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

O dropdown de horário fica desabilitado até que uma data seja selecionada e, em seguida, exibe a disponibilidade para aquele dia específico.

Seleção de Horário Completa

Aqui está o campo de seleção de horário finalizado:

<!-- 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>

Erros Comuns

Esquecer a Opção Vazia

<!-- ❌ 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>

Incompatibilidade de Tipo de 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>

Os valores das opções são strings por padrão. Use value={number} para binding numérico.

Resumo

Elementos select fazem binding com bind:value assim como inputs de texto. Gere opções dinamicamente com {#each}, desabilite escolhas indisponíveis e coordene com outros campos do formulário usando effects.

Principais conclusões:

bind:value em selects funciona como em inputs de texto
Gere opções com loops {#each}
Use disabled nas opções para horários indisponíveis
Coordene dropdowns dependentes com $effect

Próximos Passos

Data e horário estão definidos. Continue com Seleção de Serviço com bind:group para permitir que os clientes escolham qual serviço desejam.