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

Selector de fechas

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

Guía

Tutoriales sobre el selector de fecha

Probar en dispositivo

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

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

Usando @capgo/capacitor-selector-de-fecha

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

Esta es la alternativa mantenida por Capgo a @capacitor-community/date-picker. We listen to community reports, fix issues fast, and ship updates instead of leaving long-standing GitHub issues open.

Demostración nativa del selector de fecha

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

iOS

Android Demo animado de iOS de @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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 Animated Android demo of @capgo/capacitor-date-picker opening, selecting a date, and closing

Pantallas 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

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 de soporte.
  • Implementación web con el mismo present() API.
  • Programático hide().
  • Soporte para título de diálogo.
  • Disposición de layout segura en rotación de 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 de Android, is24hmanejo de disposición de diálogo y manejo de diálogo de hilera de interfaz de usuario.
  • Selección de pasos de minuto y selección de rango de fecha.

Referencia completa