1

Por necesidades visuales configure el datepicker para que el formato de fecha solo muestre dd/mm en el input y el valor completo lo estoy almacenando en un atributo del input de la siguiente manera:

<input name="ini_date_0_0" id="ini_date_0_0" class="date-picker hasDatepicker" valor="31/1/2022">

El problema es que cuando vuelvo a seleccionar la fecha el datepicker al solo tener dia y mes en el valor entonces asume que corresponde al año en curso por lo que pasaría por ejemplo de "31/1/2022" a "31-1-2021".

Existiría alguna manera de darle o bien el valor almacenado para que se asigne al hacer click, que de cualquier otra forma asi sea manejando la fecha completa se muestren en el input solo el dd-mm o bien que como sea el datepicker entienda a que año debería apuntar correctamente?

Mi codigo JavaScript es el siguiente:

//Definiciones iniciales del datepicker
        jQuery(function() {
            
            //Establecemos texto de traduccion para region
            jQuery.datepicker.regional['es'] = {
                closeText: 'Cerrar',
                prevText: '< Ant',
                nextText: 'Sig >',
                currentText: 'Hoy',
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                weekHeader: 'N°',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
            
            //Establecemos la region actual
            jQuery.datepicker.setDefaults(jQuery.datepicker.regional['es']);
            
            DatePickerNew();
        });
        
        function DatePickerNew()
        {
            jQuery('.date-picker').datepicker( {
                changeMonth: false,
                changeYear: false,
                showWeek: true,
                showButtonPanel: false,
                dateFormat: 'dd/mm',
                
                beforeShow: function(dateText, inst){
                    //valor = ( this.getAttribute("valor") ).split("/");
                    //jQuery(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
                },
                
                onClose: function(dateText, inst) {
                    jQuery(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
                    
                    this.setAttribute("valor", inst.selectedDay+"/"+(inst.selectedMonth+1)+"/"+inst.selectedYear)
                    
                    //alert(inst.selectedYear+"/"+inst.selectedMonth+"/"+inst.selectedDay)
                }
            });
        }

Considere usar el evento beforeShow pero no tengo muy claro como aplicaría

2
  • Por favor, puedes cargar mas de tu codigo HTML para imitar tu codigo?
    – Lilibeth
    el 15 dic. 2021 a las 16:46
  • Pues de lo que sea relevante supongo que lo único que podría restar seria código CSS o la hoja de estilos del jquery-ui, pero a nivel de HTML realmente no habria nada relevante realmente... De igual manera ya logre resolver mi problema, ya ahora publico mi solución :D el 15 dic. 2021 a las 19:02

1 respuesta 1

1

Ya logre resolver el inconveniente, el problema es que independientemente del código, mientras que el formato se maneje 'dd/mm' aun dándole set al datepicker con información del año este ignorará dicho dato y asumirá el año en curso. Mi solución fue hacer un pequeño evento beforeShow de la siguiente manera

beforeShow: function(input, inst) {
    
    if(input.getAttribute("data-selectedDate") != null)
    {
        input.setAttribute("style", "padding-left: 100%; padding-right: 0;");
        
        jQuery(".date-picker").datepicker( "option", "dateFormat", "dd/mm/yyyy" );
        
        objStartDate = new Date( input.getAttribute("data-selectedDate") )
        
        jQuery(input).datepicker("setDate", objStartDate );
        
    }
}

Y modificando el evento onClose

onClose: function(dateText, inst) {
    
    //Cambiamos el formato de la fecha a mostrar
    jQuery(".date-picker").datepicker( "option", "dateFormat", "dd/mm" );
    
    alert(inst.selectedYear+","+(inst.selectedMonth+1)+","+(inst.selectedDay));
    jQuery(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    
    //this.setAttribute("valor", inst.selectedDay+"/"+(inst.selectedMonth+1)+"/"+inst.selectedYear)
    this.setAttribute("data-selectedDate", inst.selectedYear+","+(inst.selectedMonth+1)+","+(inst.selectedDay) );
    
    this.setAttribute("style", "");
},

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.