Primeros pasos

Copia un prompt de configuración con los pasos de instalación y la guía completa en markdown para este plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Instalar

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

bun add @capgo/capacitor-date-picker
bunx cap sync

Importar

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

Errores comunes

Ocultar entre regalos: llama a hide() si los usuarios pueden abrir otro selector mientras uno está visible.
Strings ISO: pasa date, min, y max en el formato de string documentado para tu format opción.
Validación de rango: presentRange() también debe aplicar las reglas de negocio del lado del servidor; los usuarios pueden elegir fechas límite offline.

Pick A Date

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',
});

console.log(result.value);

Selecciona fecha y hora

const result = await DatePicker.present({
  mode: 'dateAndTime',
  date: '2026-05-27T14:30:00',
  format: "yyyy-MM-dd'T'HH:mm:ss",
  title: 'Select date and time',
});

Selecciona un mes

const result = await DatePicker.present({
  mode: 'yearAndMonth',
  date: '2026-05-01',
  format: 'yyyy-MM',
  title: 'Select month',
});

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, range.value);

Ocultar el picker

await DatePicker.hide();

Opciones de plataforma

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

Opciones comunes

Opción	Descripción
`mode`	`date`, `time`, `dateAndTime`, `yearAndMonth`, `countDownTimer`, o `range`.
`date`	Valor inicial seleccionado.
`min` / `max`	Valores mínimos y máximos seleccionables.
`format`	Formato de salida. Soporta ISO, Java/Unicode y formatos comunes tipo Moment.
`title`	Título del diálogo.
`locale`	Locale usado por los selectores nativos cuando esté disponible.
`timezone`	Zona horaria para el parseo y formateo.
`is24h`	Preferir formato de 24 horas.
`minuteStep`	Intervalo de minutos del selector de hora.
`doneText` / `cancelText`	Etiquetas personalizadas para las acciones.

App de ejemplo

El repositorio incluye una app de ejemplo Capacitor que abre el selector de fecha, hora y rango nativo, hide(), y llamadas a la versión del plugin.

iOS	Android

Referencia de API

La referencia completa de API se mantiene en el README del paquete y en las definiciones de TypeScript: