Comparación de Plugins Selector de Fecha para Frontend

A continuación se presenta un resumen de varios plugins para selección de fechas en aplicaciones web:

• jeDate Enlace de descarga
• bootstrap-datetimepicker Enlace de descarga
• My97DatePicker Enlace de descarga
• jQuery UI Datepicker Enlace de descarga

No existe un plugin que sea superior a los demás en todos los aspectos; la elección depende de los requisitos específicos del proyecto.

jeDate

jeDate ofrece funcionalidades avanzadas como límites de rango de fechas, formato personalizado, conversión de timestamps, selección de horas, minutos y segundos, identificación de días festivos y corrección automática. Actualmente está optiimzado para entornos de escritorio.

Gracias a su reciente lanzameinto, cuenta con un conjunto completo de características, incluyendo cambio de estilo visual y visualización de días festivos.

Una característica notable es que los campos de entrada de fecha suelen ser de solo lectura, y jeDate proporciona funcionalidad para limpiar la selección desde dentro del plugin, algo que otros plugins no ofrecen.

La configuración de fechas dependientes se realiza mediante el siguiente código:

var fechaInicio = jeDate({
    dateCell:"#fecha-inicio",
    format:"YYYY-MM-DD hh:mm:ss",
    isTime:true,
    isinitVal:true,
    minDate:jeDate.now(0),
    choosefun:function(val) {
        fechaFin.config.minDate = val;
        fechaRequerida.config.minDate = val;
        $("#fecha-inicio").blur();
    },
    okfun:function(val) {
        fechaFin.config.minDate = val;
        fechaRequerida.config.minDate = val;
        $("#fecha-inicio").blur();
    }
});
var fechaFin = jeDate({
    dateCell:"#fecha-fin",
    format:"YYYY-MM-DD hh:mm:ss",
    isTime:true,
    minDate:jeDate.now(0),
    choosefun:function(val) {
        fechaInicio.config.maxDate = val;
        $("#fecha-fin").blur();
    },
    okfun:function(val) {
        fechaInicio.config.maxDate = val;
        $("#fecha-fin").blur();
    }
});

var fechaRequerida = jeDate({
    dateCell:"#fecha-requerida",
    format:"YYYY-MM-DD",
    isTime:false,
    minDate:jeDate.now(0)
});

bootstrap-datetimepicker

Para establecer dependencias entre fechas de inicio y fin en este plugin, se utiliza el siguiente código:

// Inicialización de componentes de terceros
GestorArticulos.prototype.initComponentesExternos = function() {
    // Inicialización del selector de fecha
    // Configuración para permitir solo fechas anteriores a la actual
    $('#fechaInicioCreacion').datetimepicker(opcionesDateTimePicker).on('show',function(e) {
            $('#fechaInicioCreacion').datetimepicker('setEndDate',new Date());});
    $('#fechaInicioCreacion').datetimepicker(opcionesDateTimePicker).on('changeDate',function(e) {
            $('#fechaInicioCreacion').datetimepicker('setEndDate',new Date());
            $('#fechaFinCreacion').datetimepicker('setStartDate',$(this).val());});
    // Configuración para permitir solo fechas anteriores a la actual
    $('#fechaFinCreacion').datetimepicker(opcionesDateTimePicker).on('show',function(e) {
                $('#fechaFinCreacion').datetimepicker('setEndDate', new Date());
            });
    $('#fechaFinCreacion').datetimepicker(opcionesDateTimePicker).on('changeDate',function(e) {
                $('#fechaFinCreacion').datetimepicker('setEndDate', new Date());
                $('#fechaInicioCreacion').datetimepicker('setStartDate',$(this).val());});
};

Una limitación de este plugin es que no incluye un botón nativo para limpiar la fecha seleccionada. En proyectos anteriores, se implementó manualmente un botón de limpieza. Sin embargo, se puede utilizar la opción forceParse configurada en true para forzar la conversión de valores ingresados por el usuario a formatos válidos.

jQuery UI Datepicker

jQuery UI Datepicker es una opción menos utilizada actualmente debido a la rápida evolución de los frameworks frontend. Sin embargo, sigue siendo funcional para proyectos existentes o necesidades específicas.

// Espera a que los elementos DOM se carguen completamente
$(function(){
    $("#selectorFecha").datepicker({
        numberOfMonths:1, // número de meses a mostrar
        showButtonPanel:true, // mostrar panel de botones
        dateFormat: 'yy-mm-dd', // formato de fecha
        clearText:"Limpiar", // texto del botón de limpieza
        closeText:"Cerrar", // texto del botón de cierre
        yearSuffix: 'año', // sufijo del año
        showMonthAfterYear:true, // colocar el mes después del año
        defaultDate:'2011-03-10', // fecha por defecto
        minDate:'2011-03-05', // fecha mínima
        maxDate:'2011-03-20', // fecha máxima
        monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
        dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
        dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
        dayNamesMin: ['D','L','M','X','J','V','S'],
        onSelect: function(selectedDate) {
            alert(selectedDate);
        }
    });
});

My97DatePicker

My97DatePicker es uno de los plugins más antiguos pero sigue ofreciendo funcionalidades robustas, incluyendo la capacidad de buscar fechas directamente en el campo de entrada.

Configuración de fecha inicial:

// Función de fecha inicial

Nota: El formato de fecha debe coincidir con realDateFmt y realTimeFmt, no con dateFmt.

Para casos como la selección de cumpleaños, donde la fecha actual puede no ser adecuada como punto de partida, se puede utilizar la opción alwaysUseStartDate:

<input type="text" class="Wdate" id="cumpleanos" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>

El plugin ofrece flexibilidad en la restricción de rangos:

Restricción estática:

<input type="text" class="Wdate" id="horario" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

**Restricción dinámica:**El plugin permite el uso de variables dinámicas como %y (año actual), %M (mes actual), etc., y operaciones matemáticas entre llaves {}.

// Solo fechas anteriores a la actual
<input id="pasado" class="Wdate" type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/>

// Solo fechas posteriores a mañana
<input id="futuro" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

// Solo fechas del mes actual
<input id="mesActual" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

// Rango horario específico
<input id="horarioEspecifico" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

// Rango relativo de 20 horas antes y 30 horas después
<input id="relativo" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>

Estos son algunos de los plugins más utilizados para la selección de fechas en aplicaciones frontend, cada uno con sus propias fortalezas y casos de uso específicos.