¿Cuándo Deberíamos Ir?

Una reserva sin fecha no sirve de nada. Los clientes necesitan elegir cuándo quieren su servicio. El input de fecha nativo de HTML funciona bien para esto, y el binding de Svelte hace que sea fácil trabajar con él.

Lo Que Aprenderás

Hacer binding a valores de inputs de fecha
Establecer fechas mínimas y máximas
Formatear fechas para mostrarlas
Manejar validación de fechas

El Input de Fecha Básico

Los inputs de fecha hacen binding igual que los 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>

El valor es una cadena en formato YYYY-MM-DD (por ejemplo, "2025-06-15").

Evitar Fechas Pasadas

Los clientes no pueden reservar servicios para ayer. Establece una fecha 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
/>

El navegador ahora muestra en gris las fechas pasadas en el selector.

Limitar Qué Tan Adelante

Tal vez solo aceptas reservas con 3 meses de anticipación:

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

Formatear para Mostrar

El formato bruto YYYY-MM-DD no es amigable para el usuario. Formatealo de manera legible:

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

Ahora "2025-06-15" se muestra como "Sunday, June 15, 2025".

Nota: Agregamos T00:00:00 para evitar problemas de zona horaria al analizar la cadena de fecha.

Agregar al Formulario de Reserva

Integra el selector de fecha con los campos de contacto:

<!-- 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 el Día de la Semana

Tal vez no trabajas los fines 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}

Esto proporciona retroalimentación inmediata, aunque la validación del lado del servidor será la que finalmente aplique la regla.

Predeterminar a Mañana

Pre-selecciona un valor predeterminado sensato:

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

El formulario comienza con mañana seleccionado, ahorrándole un clic a los clientes.

Errores Comunes

Problemas de Análisis de Zona Horaria

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

Olvidar el Atributo min

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

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

Siempre establece min para evitar selecciones inválidas.

Resumen

Los inputs de fecha funcionan a la perfección con el binding de Svelte. Usa min y max para restringir rangos válidos, y formatea las fechas de manera legible para mostrarlas. El selector de fecha nativo maneja la mayor parte de la complejidad.

Puntos clave:

bind:value funciona con type="date"
Los valores son cadenas en formato YYYY-MM-DD
Usa min y max para restringir rangos de fechas
Formatea con toLocaleDateString() para mostrar

Próximos Pasos

Los clientes eligen una fecha, ¿pero a qué hora? Continúa con Menú Desplegable de Selección de Hora para agregar la selección de franjas horarias.