Quando Devemos Ir?

Uma reserva sem data é inútil. Os clientes precisam escolher quando querem o serviço. O input de data nativo do HTML funciona bem para isso, e o binding do Svelte facilita o trabalho com ele.

O Que Você Vai Aprender

Fazer binding com valores de input de data
Definir datas mínimas e máximas
Formatar datas para exibição
Lidar com validação de datas

O Input de Data Básico

Inputs de data fazem binding assim como inputs de texto:

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

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

<p>Selected: {bookingDate || 'No date selected'}</p>

O valor é uma string no formato YYYY-MM-DD (ex.: "2025-06-15").

Evitar Datas Passadas

Os clientes não podem reservar serviços para ontem. Defina uma data mínima:

<script>
  let bookingDate = $state('');
  
  // Get today's date in YYYY-MM-DD format
  function getTodayString() {
    return new Date().toISOString().split('T')[0];
  }
  
  let minDate = getTodayString();
</script>

<label for="booking-date">Preferred Date</label>
<input 
  type="date" 
  id="booking-date"
  bind:value={bookingDate}
  min={minDate}
  required
/>

O navegador agora deixa as datas passadas em cinza no seletor.

Limitar o Prazo Máximo

Talvez você só aceite reservas com até 3 meses de antecedência:

<script>
  let bookingDate = $state('');
  
  function getDateString(date) {
    return date.toISOString().split('T')[0];
  }
  
  let today = new Date();
  let minDate = getDateString(today);
  
  // 3 months from now
  let maxDate = getDateString(
    new Date(today.getFullYear(), today.getMonth() + 3, today.getDate())
  );
</script>

<label for="booking-date">Preferred Date</label>
<input 
  type="date" 
  id="booking-date"
  bind:value={bookingDate}
  min={minDate}
  max={maxDate}
  required
/>

<p class="hint">Book up to 3 months in advance</p>

Formatar para Exibição

O formato bruto YYYY-MM-DD não é amigável para o usuário. Formate-o de forma adequada:

<script>
  let bookingDate = $state('');
  
  function formatDate(dateString) {
    if (!dateString) return '';
    
    const date = new Date(dateString + 'T00:00:00');
    return date.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
  
  let formattedDate = $derived(formatDate(bookingDate));
</script>

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

{#if bookingDate}
  <p class="selected-date">{formattedDate}</p>
{/if}

Agora "2025-06-15" é exibido como "Sunday, June 15, 2025".

Nota: Adicionamos T00:00:00 para evitar problemas de fuso horário ao interpretar a string de data.

Adicionar ao Formulário de Reserva

Integre o seletor de data com os campos de contato:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  // Contact fields
  let customerName = $state('');
  let customerEmail = $state('');
  
  // Date selection
  let bookingDate = $state('');
  
  function getDateString(date) {
    return date.toISOString().split('T')[0];
  }
  
  let today = new Date();
  let minDate = getDateString(today);
  let maxDate = getDateString(
    new Date(today.getFullYear(), today.getMonth() + 3, today.getDate())
  );
  
  function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString + 'T00:00:00');
    return date.toLocaleDateString('en-US', {
      weekday: 'long',
      month: 'long',
      day: 'numeric'
    });
  }
</script>

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <!-- Name and email fields... -->
  </fieldset>
  
  <fieldset>
    <legend>Appointment Details</legend>
    
    <div class="field">
      <label for="booking-date">Preferred Date</label>
      <input 
        type="date" 
        id="booking-date"
        name="bookingDate"
        bind:value={bookingDate}
        min={minDate}
        max={maxDate}
        required
      />
      {#if bookingDate}
        <p class="date-preview">{formatDate(bookingDate)}</p>
      {/if}
    </div>
  </fieldset>
</form>

<style>
  .date-preview {
    margin: 0.25rem 0 0 0;
    color: #007bff;
    font-size: 0.875rem;
  }
</style>

Verificar o Dia da Semana

Talvez você não trabalhe nos fins de semana:

<script>
  let bookingDate = $state('');
  
  let isWeekend = $derived(() => {
    if (!bookingDate) return false;
    const date = new Date(bookingDate + 'T00:00:00');
    const day = date.getDay();
    return day === 0 || day === 6; // Sunday or Saturday
  });
</script>

<input type="date" bind:value={bookingDate} />

{#if isWeekend()}
  <p class="warning">
    ⚠️ We don't offer services on weekends. Please select a weekday.
  </p>
{/if}

Isso fornece feedback imediato, embora a validação no lado do servidor seja quem enforce a regra de vez.

Definir Padrão para Amanhã

Pré-selecione um padrão razoável:

<script>
  function getDateString(date) {
    return date.toISOString().split('T')[0];
  }
  
  function getTomorrow() {
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    return getDateString(tomorrow);
  }
  
  let bookingDate = $state(getTomorrow());
</script>

O formulário começa com amanhã selecionado, poupando um clique dos clientes.

Erros Comuns

Problemas de Interpretação de Fuso Horário

<script>
  let dateString = '2025-06-15';
  
  // ❌ May give wrong day due to timezone
  const date = new Date(dateString);
  
  // ✅ Explicit time prevents timezone shift
  const date = new Date(dateString + 'T00:00:00');
</script>

Esquecer o Atributo min

<!-- ❌ Users can select past dates -->
<input type="date" bind:value={bookingDate} />

<!-- ✅ Prevent past dates -->
<input type="date" bind:value={bookingDate} min={today} />

Sempre defina min para evitar seleções inválidas.

Resumo

Inputs de data funcionam perfeitamente com o binding do Svelte. Use min e max para restringir intervalos válidos, e formate as datas de forma adequada para exibição. O seletor de data nativo lida com a maior parte da complexidade.

Principais conclusões:

bind:value funciona com type="date"
Os valores são strings no formato YYYY-MM-DD
Use min e max para restringir intervalos de datas
Formate com toLocaleDateString() para exibição

Próximos Passos

Os clientes escolhem uma data, mas e o horário? Continue com Time Selection Dropdown para adicionar a seleção de horários disponíveis.