COMPONENTES / PLAYGROUND

Extended DateTimePicker

Configura, prueba y copia el código para tu proyecto.

Explora un modo

Hazlo tuyo

Ajusta el comportamiento y el estilo.

Apariencia

Modo

Tema

Apariencia

Idioma

Diseño

Formato de Fecha

Fechas y límites

Fecha mínima

Fecha máxima

Fechas Deshabilitadas

Fecha predeterminada

Usa YYYY-MM-DD. Para un rango o varias fechas, sepáralas con comas. Deja vacío para no preseleccionar ninguna fecha.

Hora Predeterminada

Controles y acciones

Botones de Acción

Cerrar

Hoy

Ahora

Limpiar

Ver Calendario

Ver Reloj

Doble Mes

Formato 24h

Deshabilitar Fines de Semana

Pruébalo en vivo

La misma configuración, dos formas de usarla.

Configuración aplicada

Vista integrada

inline

Actividad

-- Esperando eventos --

Código de tu configuración

Documentación y referencia 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

Option	Type	Default	Description / Allowed Values
`mode`	`string`	`'single'`	`'single'`, `'range'`, `'multiple'`, or `'birthday'`.
`layout`	`string`	`'vertical'`	`'vertical'` or `'horizontal'`. Horizontal applies when both calendar and clock are visible outside birthday mode.
`showCalendar`	`boolean`	`true`	Show the calendar; birthday mode uses its own date controls.
`showClock`	`boolean`	`true`	Show the clock. Set to `false` for date-only selection.
`themeColor`	`string`	`'success'`	Bootstrap color name, such as `'primary'`, `'success'`, or `'danger'`.
`format24h`	`boolean`	`true`	Use 24-hour display; `false` shows 12-hour time with AM/PM.
`defaultTime`	`string/array/null`	`null`	Initial `HH:mm` time, or two times for a range. Configuration always uses 24-hour format.
`selectedDates`	`array`	`[]`	Initial ISO dates. Single/birthday use one; range uses up to two; multiple accepts several.
`minDate`	`string/null`	`null`	Earliest selectable ISO date, inclusive.
`maxDate`	`string/null`	`null`	Latest selectable ISO date, inclusive.
`disableWeekends`	`boolean`	`false`	Disable Saturdays and Sundays.
`disabledDates`	`array`	`[]`	Specific ISO dates that cannot be selected.
`doubleMonth`	`boolean`	`false`	Display two consecutive calendar months.
`dateFormat`	`string`	`'YYYY-MM-DD'`	Output format, for example `'DD/MM/YYYY'`.
`lang`	`string/object`	`'es'`	`'es'`, `'en'`, or a partial/custom translation object.
`actions`	`array`	`['close', 'today', 'now', 'clear']`	Footer buttons in the supplied order; `[]` hides them. Today requires the calendar; Now requires the clock; Close closes input dropdowns.

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	Default	Parameters and behavior
`onOpen`	No-op function	No arguments. Runs when a picker opens; `this` is the target element.
`onClose`	No-op function	No arguments. Runs when a picker closes, including when another input picker opens; `this` is the target element.
`onSelectDate`	`null`	`(dateObj, formattedDates)`: a `Date` for single/birthday, an array of dates for range/multiple, and an array of formatted strings. Clear or a blocked birthday edit returns `(null, [])`. Today also invokes this callback.
`onSelectTime`	`null`	`(timeState)`: `{ hour, minute }`, plus `ampm` in 12-hour mode. Range mode returns an array of start/end time objects.