Extended DateTimePicker - Playground & Documentación

Probar Configuración
1. Instancia sobre un <input>
2. Instancia sobre un <div>

Documentación Técnica de la API

Soporte de Elementos Destino

El plugin detecta automáticamente la etiqueta del selector sobre el cual es invocado:

  • Si es un <input>: Se comporta como un desplegable emergente (dropdown) posicionado dinámicamente bajo el campo de texto.
  • Si es un <div> o contenedor genérico: Se renderiza directamente en el DOM en modo estático (inline), mostrándose completo y visible de inmediato.
Atributos y Opciones de Configuración (`options`)
Opción Tipo Valor por Defecto Descripción
mode String 'single' Modo de selección del calendario: 'single', 'range', 'multiple' o 'birthday'.
layout String 'vertical' Orientación visual del componente cuando coexisten calendario y reloj: 'vertical' u 'horizontal'.
themeColor String 'success' Tema de color Bootstrap asignado a los días activos y botones: 'success', 'primary', 'danger' o 'warning'.
lang String | Object 'es' Idioma del plugin. Acepta código de idioma en cadena ('es', 'en') o un objeto i18n personalizado.
showCalendar Boolean true Muestra u oculta la sección del calendario.
showClock Boolean true Muestra u oculta la sección del selector de hora (Reloj).
doubleMonth Boolean false Habilita la vista continua de dos meses paralelos (útil en modo 'range').
format24h Boolean true Formato del reloj: true para 24 horas (00-23) o false para 12 horas con indicador AM/PM.
dateFormat String 'YYYY-MM-DD' Patrón de formateo para el valor del input. Ejemplos: 'YYYY-MM-DD', 'DD/MM/YYYY', 'MM/DD/YYYY'.
minDate / maxDate String | Date null Limita el rango de fechas seleccionables en el calendario.
disableWeekends Boolean false Deshabilita automáticamente los días Sábado y Domingo.
disabledDates Array [] Lista de fechas específicas deshabilitadas en formato 'YYYY-MM-DD'.
Métodos Públicos

Puedes invocar métodos pasando el nombre de la acción como cadena de texto al plugin:

open

Abre manualmente el cuadro desplegable en elementos <input>.

$('#picker-input').extendedDateTimePicker('open');
close

Cierra el cuadro desplegable activo.

$('#picker-input').extendedDateTimePicker('close');
destroy

Destruye la instancia, elimina event listeners y restaura el DOM original.

$('#picker-input').extendedDateTimePicker('destroy');
Callbacks / Eventos
Callback Parámetros Descripción
onSelectDate (dateObj, formattedDate) Se dispara al seleccionar una o más fechas en el calendario. Devuelve el objeto Date nativo y la cadena formateada.
onSelectTime (timeState) Se dispara al modificar la hora o minutos en el reloj. Devuelve un objeto con { hour, minute, ampm }.
onOpen () Se dispara inmediatamente después de desplegar el selector.
onClose () Se dispara cuando el selector desplegable se oculta.