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

Tutoría sobre Selector de Fecha

Probar en dispositivo

Descargue la aplicación Capgo, luego escane 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.

Esta es la alternativa mantenida por 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 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

Capturas de pantalla 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 rotación de iOS, manejo de ubicación y modo. yearAndMonth Módulo.
  • Fecha de parseo seguro y manejo de zona horaria de fecha solo.
  • Opciones anidadas de Android, manejo de diseño de diálogo y manejo de diálogo de hilera de interfaz de usuario. is24hSelección de fecha y rango de fecha en pasos pequeños.
  • Referencia completa

__CAPGO_KEEP_0__: