javascript - close - Forma correcta de agregar una devolución de llamada a jQuery DatePicker

jquery modal show

Question

DatePicker tiene una función interna, _adjustDate() , que me gustaría agregar una devolución de llamada después.

Método actual

Así es como estoy haciendo esto actualmente. Básicamente, solo se reemplaza la definición de la función, más las nuevas operaciones. Esto afecta a todos los seleccionadores de fechas, que tampoco estoy seguro de que se desee.

$(function(){

   var old = $.datepicker._adjustdate;

   $.datepicker._adjustDate = function(){
      old.apply(this, arguments);

      // custom callback here     
      console.log(''callback'');
   };

});

_adjustDate es lo que se llama durante los clics del mes siguiente / anterior. La función toma tres parámetros. Tengo curiosidad si hay una mejor manera de agregar la devolución de llamada.

Resultado Esperado

Me gustaría que el resultado final se vea así. donde afterAjustDate es el identificador de devolución de llamada:

$(''#datepicker'').datepicker({ 
       showButtonPanel: true
     , afterAdjustDate: function(){ $(this).find(''foo'').addClass(''bar''); }
});

Para tu información

onChangeMonthYear no es una alternativa de evento aceptable, ni las opciones de enlace live() / delegate() (no funcionan en IE).

Esto viene de la necesidad de aplicar clases / manipular elementos después de seleccionar el mes. Cambiar el mes recrea elementos en el calendario; cuando se realiza esto, jQueryUI no es lo suficientemente inteligente como para heredar los cambios de clase. Por lo tanto, necesito una devolución de llamada después de cambiar la fecha.

Answer 1

En Datepicker v1.0.0 puede usar la opción de pick .

    var date = new Date();
    $(''.datepicker-trigger'').datepicker({
        format: ''mm/dd/yyyy'',
        autoPick: false,
        startDate: date.getDate(),
        changeMonth: false,
        changeYear: false,
        autoHide: true,
        pick: function (selectedDate) {
            console.log(selectedDate);
        }
    });

Answer 2

Escribí una pequeña demostración que hace esto ...

Creo un objeto literal que contiene las extensiones a $ .datepicker y luego hago $ .extend en $ .datepicker y mi objeto.

Puede verlo aquí: http://jsfiddle.net/NHN4g/4/

Aquí está la extensión en sí:

(function($){
    var datepickerExtensions = {
        _oldAdjustDate: $.datepicker._adjustDate,
        _adjustDate: function(id, offset, period) { 
            var target = $(id);
            var inst = this._getInst(target[0]);
            var afterAdjustDate = this._get(inst, ''afterAdjustDate'');
            this._oldAdjustDate(id, offset, period);
            if(afterAdjustDate && typeof afterAdjustDate === ''function''){
                afterAdjustDate(id, offset, period);
            }
        }
    }
    $.extend($.datepicker, datepickerExtensions);
})(jQuery);

Y la demo:

(html)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->

(javascript)

var changed = false;
$("#datepicker").datepicker({ 
    afterAdjustDate: function(i,o,p){
        if(!changed){
            $(''.ui-datepicker-month'').css(''color'', ''#f00'');
        }
        changed = !changed;
    }
});

Answer 3

Hay una opción onSelect que puede usar para pasar una función de devolución de llamada al seleccionador de fecha. Parece que esto podría ser una solución integrada para lo que necesita.

$(''.datepicker'').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});