Saltar al contenido principal
Volver a plugins
@capgo/capacitor-selector-date-picker
Tutoriales
@capgo/capacitor-selector-date-picker

Selector de fecha

Selector de fecha nativo, hora, fecha-hora, año-mes y rango para iOS, Android y Web

Guía

Tutoría sobre Selector de Fecha

Usando @capgo/capacitor-selector-de-fecha

@capgo/capacitor-date-picker agrega seleccionadores de fecha, hora, fecha-hora, año-mes y rango nativos a las aplicaciones de Capacitor en iOS y Android, con un fallback web compatible.

Esta es la alternativa mantenida de Capgo @capacitor-community/date-pickerEscuchamos los informes de la comunidad, resolvemos problemas rápidamente y enviamos actualizaciones en lugar de dejar problemas de GitHub abiertos durante mucho tiempo.

Instalar

npm install @capgo/capacitor-date-picker
npx cap sync

Demo de Selector de Fecha Nativo

iOS Android
Demo animado de iOS de @capgo/capacitor-selector de fecha abriendo, seleccionando una fecha y cerrando Demo animado de Android de @capgo/capacitor-selector de fecha abriendo, seleccionando una fecha y cerrando

Capturas de pantalla de selector nativo

iOS Android
Captura de pantalla de iOS de @capgo/capacitor-selector de fecha mostrando el selector de fecha nativo Captura de pantalla de Android de @capgo/capacitor-selector de fecha mostrando el selector de fecha nativo

Selecciona una fecha

import { DatePicker } from '@capgo/capacitor-date-picker';

const result = await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  min: '2026-01-01',
  max: '2026-12-31',
  format: 'yyyy-MM-dd',
  title: 'Select date',
});

console.log(result.value);

Selecciona una hora

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

Selecciona un rango

const range = await DatePicker.presentRange({
  start: '2026-05-01',
  end: '2026-05-27',
  format: 'yyyy-MM-dd',
  startTitle: 'Start date',
  endTitle: 'End date',
});

console.log(range.start, range.end);

Cierra un selector activo

await DatePicker.hide();

¿Qué se soluciona con esto?

  • Capacitor 8 soporte.
  • Implementación web con el mismo present() API.
  • Programático hide().
  • Título de diálogo de soporte.
  • Diseño de layout seguro para rotación de iOS, manejo de idioma y yearAndMonth modo.
  • Análisis de fechas más seguro y manejo de zona horaria de fecha solo.
  • Manejo de opciones anidadas de Android, manejo de diseño de diálogo y manejo de diálogo en hilos de interfaz de usuario. is24hSelección de pasos y selección de rango de fechas.
  • Referencia completa

__CAPGO_KEEP_0__ 8 soporte.