Volver a Components

Date Picker

<sg-date-picker> v0.1.1

Selector de fecha con calendario completo. Soporta i18n (espa帽ol/ingl茅s), fechas m铆nimas/m谩ximas y es totalmente accesible.

Ejemplos

B谩sico

example.html 
<sg-date-picker placeholder="Seleccionar fecha..."></sg-date-picker>

Con valor inicial

example.html 
<sg-date-picker value="2024-12-25"></sg-date-picker>

Idiomas

example.html 
<sg-date-picker locale="es" placeholder="Espa帽ol..."></sg-date-picker>
<sg-date-picker locale="en" placeholder="English..."></sg-date-picker>

Con restricciones

Solo permite fechas del a帽o 2024

example.html 
<sg-date-picker
  min-date="2024-01-01"
  max-date="2024-12-31"
  placeholder="Solo a帽o 2024..."
></sg-date-picker>

Estados

Este campo es requerido

example.html 
<sg-date-picker disabled placeholder="Deshabilitado"></sg-date-picker>
<sg-date-picker has-error placeholder="Con error"></sg-date-picker>

No limpiable

Sin bot贸n de limpiar

example.html 
<sg-date-picker
  value="2024-06-15"
  clearable="false"
></sg-date-picker>

En formulario
example.html 
<sg-form-section section-title="Fechas del Evento" icon-bg-class="hl-keyword">class="bg-blue-100">
  <sg-icon slot="icon" name="calendar" size="20"></sg-icon>
  <label>Fecha de inicio</label>
  <sg-date-picker placeholder="Seleccionar..."></sg-date-picker>
  <label>Fecha de fin</label>
  <sg-date-picker placeholder="Seleccionar..."></sg-date-picker>
</sg-form-section>

API Reference

Propiedades

9
Prop Tipo Default Descripci贸n
value string | null null Fecha en formato ISO (YYYY-MM-DD)
placeholder string 'Seleccionar fecha...' Texto del placeholder
disabled boolean false Deshabilita el selector
has-error boolean false Muestra estado de error
clearable boolean true Permite limpiar la fecha
align-right boolean false Alinea el dropdown a la derecha
locale 'es' | 'en' 'es' Idioma del calendario
min-date string undefined Fecha m铆nima seleccionable (ISO)
max-date string undefined Fecha m谩xima seleccionable (ISO)

Eventos

1
Evento Tipo Descripci贸n
sgChange CustomEvent<string | null> Emitido cuando cambia la fecha

C贸mo usar