JQuery UI Datepicker, invierta el orden del año en los menús desplegables

Question

Tengo un datepicker con changeyear: verdadero. El menú desplegable 'año' muestra el título como 2009, luego, en lugar del año siguiente debajo del título, 2008, 2007, 2006, etc., comienza en 1999 y cuenta hacia arriba. Parece que no puedo encontrar una solución fácil para invertir este orden?

Answer 1

No recomendaría editar el ui.datepicker.js original como Cuong sugerido porque sus cambios se perderán tan pronto como usted u otro desarrollador reemplace el archivo cuando se lance una nueva versión. Recordar qué personalizaciones se han realizado para volver a aplicar no es práctico. En su lugar, puede anular la _generateMonthYearHeader método existente en sus propios JS separadas de este modo:

// store original so we can call it inside our overriding method 
$.datepicker._generateMonthYearHeader_original = $.datepicker._generateMonthYearHeader; 

$.datepicker._generateMonthYearHeader = function(inst, dm, dy, mnd, mxd, s, mn, mns) { 
    var header = $($.datepicker._generateMonthYearHeader_original(inst, dm, dy, mnd, mxd, s, mn, mns)), 
     years = header.find('.ui-datepicker-year'); 

    // reverse the years 
    years.html(Array.prototype.reverse.apply(years.children())); 

    // return our new html 
    return $('<div />').append(header).html(); 
} 

acabo escribió esto para algo que estoy trabajando y lo hace el truco muy bien :)

Answer 2

• Abrir el archivo ui.datepicker.js
• Encontrar el método _generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, secondary, monthNames, monthNamesShort)

• Encuentra el siguiente bucle en el método

  for (; year <= endYear; year++) { 
      html += '<option value="' + year + '"' + 
       (year == drawYear ? ' selected="selected"' : '') + 
       '>' + year + '</option>'; 
  } 
  
  html += '</select>'; 
  

• Inserte el siguiente código antes de ese bucle:

  if (year-100 < 1900) // Check year is lower then 1900 
      year = 1950;  // change start point of above loop, it helps you having the 
          // year's dropdownlist starting at 1950, and ending of current year plus 10. 
  

Answer 3

reemplazar la primera línea de la for bucle con:

var minYear = year; 
year = endYear; 
for (; year >= minYear; year--) { 

Answer 4

tengo una respuesta para usted, pero no es exactamente lo que es posible que desee escuchar.

Después de buscar en Internet por una solución que invertir el orden de los años en el menú desplegable, he llegado a esto:

{ 
    changeMonth: true 
    , changeYear: true 
    , yearRange: '-65:' 
    , maxDate: '1999/12/31' 
} 

Esto tendrá el MaxDate preseleccionado, y por lo tanto la elección de un año se Ver automáticamente la última entrada, por lo tanto, puede desplazarse hasta para elegir una fecha anterior.

Editar: yearRange se agrega arbitrariamente, para crear un punto de partida hace 65 años. maxDate también se elige arbitrariamente, como una fecha de 12 años antes de escribir este comentario. Básicamente, este menú permitirá que alguien elija una edad entre 12 y 65 años.

No es ideal, pero funciona bastante bien.

Answer 5

Creo que la mejor manera de hackear el complemento sin extraerlo es asignar un controlador de eventos al elemento de selección del año.

//Hack for reverting year order 
$(document.body).delegate('select.ui-datepicker-year', 'mousedown', function() { 
    (function(sel) { 
    var el = $(sel); 
    var ops = $(el).children().get(); 
    if (ops.length > 0 && $(ops).first().val() < $(ops).last().val()) { 
     $(el).empty(); 
     $(el).html(ops.reverse()); 
    } 
    })(this); 
}); 

¡Este código debe funcionar bien! : P

Answer 6

Revisión mi propia responder. Espero que esto ayude :) !

jQuery datepicker year dropdown starts from 1900 and I want it to start from the bottom

Esto es cómo resolví mi problema.y creo que esta es la razón por jQuery no están arreglando este "error" porque hay un "camino" para obtener el año comenzó a partir de la última fecha:

dateFormat: 'mm/dd/yy', 
changeMonth: true, 
changeYear: true, 
yearRange: "-70:", 
maxDate: "-13Y" 

En comparación con mi código original publicado aquí, en cambio si usa yearRange como años fijos yearRange: "1900:-13" es mejor usar de abajo arriba: "-70:". y establecer el maxDate. Así que ahora tengo mi caja de selección de año a partir de 2004 y no 1900.

Espero que esto ayude a los demás.

P.S: Todas las demás soluciones han sido probadas. Son muy lentos, y algunos no funcionan tan bien (especialmente los antiguos: establece el año actual en lugar de 2004, por ejemplo).