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

Selector de fechas

Fecha y hora nativa, selector de fecha y hora, selector de fecha y hora de rango, selector de año y mes, y selector de rango para iOS, Android y Web

Guía

Tutorial sobre Selector de Fecha

Probar en dispositivo

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

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

Usando @capgo/capacitor-date-picker

@capgo/capacitor-date-picker agrega seleccionadores de fecha, hora, fecha y 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 a @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 animado de iOS de @capgo/capacitor-date-picker abriendo, seleccionando una fecha y cerrando Demo animado de Android de @capgo/capacitor-date-picker abriendo, seleccionando una fecha y cerrando

Pantallas de selector nativo

iOS Android
Captura de pantalla de iOS de @capgo/capacitor-date-picker mostrando el selector de fecha nativo Captura de pantalla de Android de @capgo/capacitor-date-picker 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é soluciona 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 en iOS, manejo de idiomas, y yearAndMonth modo.
  • Fecha de parseo más 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. is24hAndroid nested options, dialog layout handling, and UI-thread dialog handling.
  • Pasos y selección de fecha en minutos.

Referencia completa.