Saltar al contenido principal
Volver a plugins
@capgo/capacitor-selector-de-fechas
Tutoriales
@capgo/capacitor-selector-de-fechas

Selector de fechas

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

Guía

Tutorial sobre Selector de Fecha

Probar en dispositivo

Descargar la aplicación Capgo, luego escanea el código QR code.

Enlace de vista previa QR del plugin de selector de fecha code

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 Capacitor en iOS y Android, con un fallback web compatible.

Este es el alternativo mantenido de Capgo @capacitor-community/date-picker. Escuchamos los informes de la comunidad, arreglamos 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 animada de iOS de @capgo/capacitor-selector-de-fecha abriendo, seleccionando una fecha y cerrando Demo animada de Android de @capgo/capacitor-selector-de-fecha abriendo, seleccionando una fecha y cerrando

Pantallas de selector nativo

IOS Android
Captura de pantalla de IOS de @capgo/capacitor-selector-de-fechas mostrando el selector de fechas nativo Captura de pantalla de Android de @capgo/capacitor-selector-de-fechas mostrando el selector de fechas nativo

Elige 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);

Elige Una Hora

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

Elige 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);

Cerrar Un Selector Activo

await DatePicker.hide();

¿Qué Esto Arregla?

  • Capacitor 8 soporte.
  • Implementación web con el mismo present() API.
  • Programación hide().
  • Soporte para título de diálogo.
  • Diseño de layout seguro para iOS, manejo de localización y yearAndMonth modo.
  • Análisis de fechas más seguro y manejo de zona horaria de fecha solo.
  • Opciones anidadas en Android, manejo de diseño de diálogo y manejo de diálogo en hilos de interfaz de usuario. is24hSelección de fecha y rango de fecha en pasos pequeños.
  • Referencia completa

__CAPGO_KEEP_0__: