jQuery UI Datepicker - Cómo alterar Datepicker HTML

Necesito hacer algunos cambios simples en el HTML Datepicker generado por el jQuery UI Datepicker, por ejemplo. agregando un breve texto después de la tabla de calendario.jQuery UI Datepicker - Cómo alterar Datepicker HTML

que han estado tratando de hacer esto utilizando el evento beforeShow, pero mientras pueda acceder al código HTML actual, el uso de esta, la manipulación no funciona:

beforeShow: function(input, inst) { 
//#this works 
alert($('#ui-datepicker-div').html()); 
//#this does nothing 
$('#ui-datepicker-div').append('message');   
}

Creo que esto podría ser debido a que los elementos HTML datepicker se agregan a la Dom más adelante y, por lo tanto, el método en vivo es necesario para actualizar el HTML, pero no sé cómo conectar el método en vivo con esta función de devolución de llamada. O bien, podría estar acercándome a esto por el camino equivocado.

Realmente apreciaría si alguien pudiera ayudarme con esto ya que he buscado y probado muchas cosas, pero parece que no puedo hacer que esto funcione. Gracias.

Fuente

2011-07-11 Tidy

Si todo lo que estamos haciendo es añadir elementos a la parte inferior del selector de fechas, por qué no sólo tiene que añadir aquellos elementos directamente en el HTML? –

¡Me preguntaba lo mismo con la cabeza despejada esta mañana! :) Esperaba evitar editar el código central si fuera posible para que cualquier mantenimiento futuro sea más fácil. Supuse que sería bastante fácil manipular el HTML de una devolución de llamada y que solo estaba usando la línea de código incorrecta. – Tidy

Quiero hacer exactamente lo mismo, excepto que necesito usar wrapInner(), que nuevamente no tiene ningún efecto. Divertido como removeClass() y addClass() parecen funcionar bien. Quiero hacer esto solo cuando se abre el marcador de fecha ... – Sniffer

Parece que necesita esperar hasta que la tabla .ui-datepicker-calendar se inserte en el #ui-datepicker-div para anexar su mensaje. Se podría hacer un temporizador para comprobar que:

$('#datepicker').datepicker({ 
    beforeShow: function(input, inst) { 
     insertMessage(); 
    } 
}); 

// listen to the Prev and Next buttons 
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage); 

function insertMessage() { 
    clearTimeout(insertMessage.timer); 

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) 
     $('#ui-datepicker-div').append('<div>foo</div>'); 
    else 
     insertMessage.timer = setTimeout(insertMessage, 10); 
}

~~verlo en acción: http://jsfiddle.net/william/M9Z7T/2/.~~

Véalo en acción: http://jsfiddle.net/M9Z7T/126/.

Fuente

2011-09-02 23:20:37

Brilliant William: gracias por tomarse la molestia de configurar un ejemplo – Tidy

El mensaje se restablece cuando cambia el mes. –

¡Genial! Pero un mencionado antes, el mensaje se restablece cuando cambia el mes. ¿Hay alguna manera de mantener el mensaje? –

$('.datepicker').datepicker({ beforeShow: function() { 
     setTimeout(appendsomething, 10); 
    }, 
    onChangeMonthYear: function() { 
     setTimeout(appendsomething, 10); 
     } 
    } 
    ); 

var appendsomething = function() { 
    $("#ui-datepicker-div").append("<div class='something'>something</div>"); 
}

Fuente

2013-06-06 06:57:15

Esto parece funcionar al hacer clic en los botones del mes siguiente/anterior. Sugeriría agregar algunos comentarios sobre la solución para explicar que esto parece resolver el problema experimentado por @Clyde Lobo. Estuve buscando por varias semanas una solución para esto. ¡Gracias! – timmackay

tal vez funcione debido a que el temporizador no se borra. En mi caso onChangeMonthYear no funciona en absoluto. –

uso el siguiente truco para mono-parche de la función _generateHTML. El siguiente ejemplo reemplaza algunas clases jQuery-ui con clases jQuery-mobile usando expresiones regulares. Modificar de acuerdo a sus necesidades:

(function() { 
    $.datepicker._generateHTML_old = $.datepicker._generateHTML; 
    $.datepicker._generateHTML = function (inst) { 
     var html = this._generateHTML_old(inst); 
     html = html.replace(/<a class="(ui-datepicker-prev ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext$2"'); 
     html = html.replace(/<a class="(ui-datepicker-next ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext$2"'); 
     html = html.replace(/<span class="ui-icon ui-icon-circle-triangle-.">(.+?)<\/span>/g, '$1'); 
     return html; 
    }; 
})();

Editar: el uso de las funciones de expresiones regulares/cuerda para editar HTML es realmente una mala idea. Considere colocar el HTML dentro de un elemento, manipularlo y tomar el HTML resultante.

Fuente

2014-03-19 14:35:11

Se puede hacer tan simple como esto (esto funciona con el nuevo selector de fechas):

$('.datepicker').datepicker('show'); 
$(".ui-datepicker").append(<div>Foo</div>); 

$(document).on('click', '.ui-datepicker-next', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
}) 

$(document).on('click', '.ui-datepicker-prev', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
})

Fuente

2016-10-25 08:16:32 slowpoke123

jQuery UI Datepicker - Cómo alterar Datepicker HTML

Respuesta

Cuestiones relacionadas