jquery-ui - language - datepicker format

El botón Hoy en jQuery Datepicker no funciona

Question

Estoy usando jQueryUI Datepicker y muestro el botón "Hoy". Pero no funciona. Tampoco funciona en demostración: http://www.jqueryui.com/demos/datepicker/#buttonbar

Quiero completar la entrada con hoy cuando presione este botón.

¿Es posible hacerlo funcionar?

Answer 1

(Tenga en cuenta que esto no es una pregunta. Estoy tratando de ayudar proporcionando mi solución ya que las otras soluciones no me funcionaron).

No pude conseguir que el selector de fechas permanezca oculto con ninguna de las otras respuestas. El calendario se cerraría y luego se volvería a abrir. El siguiente código me ayudó a cambiar el botón Hoy para establecer la fecha en el día actual y cerrar el calendario.

jQuery UI - v1.11.4 jQuery JavaScript Library v1.11.1 IE 11.0.28

He incluido mis valores predeterminados para completar.

    $.datepicker._gotoToday = function(id) {
      var inst = this._getInst($(id)[0]);

      var date = new Date();
      this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find(''td.ui-datepicker-today''));
    }

    $.datepicker.setDefaults({
      changeMonth: true,
      maxDate: ''today'',
      numberOfMonths: 1,
      showButtonPanel: true
    });

Answer 2

Aunque sé que esto ya ha sido aceptado, aquí está mi solución ampliada basada en la idea de Samy Zine . Esto estaba usando jQuery 1.6.3 y jQuery UI 1.8.16, y funcionó para mí en Firefox 6.

$(''.ui-datepicker-current'').live(''click'', function() {
    // extract the unique ID assigned to the text input the datepicker is for
    // from the onclick attribute of the button
    var associatedInputSelector = $(this).attr(''onclick'').replace(/^.*''(#[^'']+)''.*/gi, ''$1'');
    // set the date for that input to today''s date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});

También puede blur() la $associatedInput y enfocarse en la siguiente entrada / selección en su página, pero eso no es trivial de manera genérica, o es específico de la implementación.

Como ejemplo, hice esto en una página en la que estaba trabajando que usaba tablas para el diseño (no me hagas comenzar, ¡sé que es una mala práctica!):

$associatedInput.closest(''tr'').next(''tr'').find(''input,select'').first().focus();

Answer 3

Creo que la mejor manera de manejar esto es anulando el método _goToToday fuera de la biblioteca misma. Esto resolvió el problema para mí:

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
  old_goToToday.call(this,id)
  this._selectDate(id)
}

Simple y no requiere que hackear ningún evento o cambiar ninguna funcionalidad subyacente

Answer 4

Debería usar la opción: todayBtn: "vinculado". (en lugar de todayBtn: cierto).

todayBtn Boolean, "vinculado". Predeterminado: falso

Si es verdadero o "vinculado", muestra un botón "Hoy" en la parte inferior del selector de fecha para seleccionar la fecha actual. Si es verdadero, el botón "Hoy" solo moverá la fecha actual a la vista; si está "vinculado", también se seleccionará la fecha actual.

Para obtener más detalles, consulte el siguiente enlace: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Answer 5

El marcador de fecha se está refactorizando para que sea al menos 10 veces más increíble. La nueva versión abordará este problema.

http://wiki.jqueryui.com/w/page/12137778/Datepicker

Answer 6

Este es un truco que funcionó para mí que utiliza la función de devolución de llamada beforeShow de Datepicker en lugar del enfoque live ().

     ,beforeShow: function(input, datepicker) {
         setTimeout(function() {
             datepicker.dpDiv.find(''.ui-datepicker-current'')
                .text(''Select Today'')
                .click(function() {
                     $(input)
                         .datepicker(''setDate'', new Date())
                         .datepicker(''hide'');
                });
         }, 1);
         return {};
     }

Answer 7

Este es un truco simple

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});

Answer 8

He agregado una opción al selector de fecha para ese fin: seleccione Corriente.

Para hacer lo mismo, solo tiene que agregar lo siguiente al archivo js descomprimido:

1) Hacia el final de la función Datepicker (), agregue:

selectCurrent: false // True to select the date automatically when the current button is clicked

2) Al final de la función _gotoToday, agregue:

if (this._get(inst, ''selectCurrent''))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

Answer 9

La documentación dice qué botón de "hoy" qué título podría modificarse a través de

.datepicker(''option'', ''currentText'', ''New Title'') 

solo se muestran los cambios mes a mes. Este comportamiento también podría ser configurado

.datepicker(''option'', ''gotoCurrent'', true);

Luego de presionar el botón, se cambiará el mes mostrado al de la fecha seleccionada.

Parece que enviar una fecha con este botón es imposible por diseño.

Answer 10

Me deshice de eso.

En algún archivo CSS que sea parte de tu página:

.ui-datepicker-current {
    visibility:hidden
}

Answer 11

No me gusta la idea de agregar código adicional al código fuente de jQuery. Y no quiero anular el método _gotoToday copiando y pegando su implementación en algún lugar del código de JavaScript y agregando líneas adicionales en la parte inferior.

Entonces, lo pellizqué usando este código:

(function(){
    var original_gotoToday = $.datepicker._gotoToday;

    $.datepicker._gotoToday = function(id) {
        var target = $(id),
            inst = this._getInst(target[0]);

        original_gotoToday.call(this, id);
        this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    }
})();

Answer 12

No me gusta la solución de modificar el código fuente de jQuery porque elimina la capacidad de usar un CDN. En su lugar, puede reasignar la función _gotoToday incluyendo este código basado en la respuesta de @meesterjeeves en algún lugar del archivo de alcance de JavaScript de su página:

$.datepicker._gotoToday = function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, ''gotoCurrent'') && inst.currentDay) {
            inst.selectedDay = inst.currentDay;
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;
            inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
            var date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
            // the below two lines are new
            this._setDateDatepicker(target, date);
            this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
}

El código anterior es esencialmente el mismo que jQuery UI Datepicker de la versión 1.10.1 a excepción de las dos líneas marcadas anteriormente. Todo el mumble-jumbo con gotoCurrent puede ser eliminado ya que esa opción no tiene sentido con nuestro nuevo significado de "hoy".

Answer 13

Su código no está realmente roto. Simplemente no hace lo que la mayoría de la gente esperaría que hiciera. Que es ingresar la fecha de hoy en el cuadro de entrada. Lo que sí hace, es resaltar para que el usuario vea la fecha de hoy en el calendario. Si se cancelaron en otro mes u otro año, el calendario vuelve a la vista actual sin anular la selección de la fecha que el usuario ya seleccionó.

Para que sea más intuitivo, deberá actualizar el código del complemento para adaptarlo a sus necesidades. Déjame saber como va.

Necesitará obtener la versión no comprimida del Javascript de jquery-ui. Estoy mirando la versión 1.7.2 y la función "_gotoToday" está en la línea 6760. Solo agregue una llamada a ese _gotoToday que active la función _selectDate () en la línea 6831. :) Happy Coding.

Answer 14

También puede probar el siguiente código para completar la fecha actual en el cuadro de entrada al hacer clic en el botón Hoy. Simplemente ponga el siguiente código en la función _gotoToday (al final de la función) en jquery.ui.datepicker.js .

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

Tenga en cuenta que estoy usando la versión 1.8.5 de jquery datepicker.

Answer 15

También puedes intentar agregar esto a tu script:

$(''.ui-datepicker-current'').live(''click'', function() {
       $(".datepicker").datepicker("setDate", date);
});

(use la función .live y no .click)

Answer 16

jQuery UI Datepicker Today Link

$(''button.ui-datepicker-current'').live(''click'', function() { $.datepicker._curInst.input.datepicker(''setDate'', new Date()).datepicker(''hide'').blur(); });

Answer 17

Simplemente agregue las siguientes dos líneas de código a la función _gotoToday ...

/* Action for current link. */
_gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, ''gotoCurrent'') && inst.currentDay) {
        inst.selectedDay = inst.currentDay;
    inst.drawMonth = inst.selectedMonth = inst.currentMonth;
    inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
        var date = new Date();
        inst.selectedDay = date.getDate();
        inst.drawMonth = inst.selectedMonth = date.getMonth();
        inst.drawYear = inst.selectedYear = date.getFullYear();
    }
    this._notifyChange(inst);
    this._adjustDate(target);

    /* ### CUSTOMIZATION: Actually select the current date, don''t just show it ### */
    this._setDateDatepicker(target, new Date());
    this._selectDate(id, this._getDateDatepicker(target));
},

Answer 18

$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]);

  var date = new Date();
  this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find(''td.ui-datepicker-today''));
}

$.datepicker.setDefaults({
  changeMonth: true,
  maxDate: ''today'',
  numberOfMonths: 1,
  showButtonPanel: true
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">