jQueryUI DatePicker Personnalisation de l'année

Question

J'ai un datpicker utilisant jPeryui DatePicker.

L'exigence de comportement est:

• Un utilisateur peut enregistrer un anniversaire pour un ami. L'utilisateur devrait être en mesure de stocker une année si elle est connue, ou sélectionner "N/A". Si "N/A" est sélectionné, Enregistrer l'année 1900 dans la base de données et afficher uniquement le jour et le mois dans un champ de saisie pour l'utilisateur.

• Le menu déroulant devrait commencer à 1950, mais montrer les 100 dernières années de date (< - ce serait la cerise sur le gâteau, sinon commencer à l'année en cours et, si nécessaire revenir à 1900)

Voici ce que j'ai obtenu jusqu'ici, mais c'est un peu bizarre ... et c'est un euphémisme. Et pour une raison quelconque, si l'utilisateur sélectionne une date, mais ne modifie pas la liste déroulante de l'année, l'année en cours est stockée, plutôt que 1900.

(c'est dans le contexte d'un appel JSON). Sûrement il y a un meilleur moyen.

var birthday_options = {changeMonth: true, changeYear: true, yearRange: '1900:2010', 
     onClose: function(dateText, inst) { 
     contact.field_updater('birthday').call(this); 
     $('input.mng-birthday').val(function(i, val) { 
         return val.replace('/1900', ''); 
        }); 
     }, 
     beforeShow: function (input) { 
         setTimeout(function() { 
         $('select.ui-datepicker-year option:first').text('N/A');                 
         }, 1); 
        }}, 

.find('.mng-birthday').val(data.birthday || 'Unknown') 
    .datepicker(birthday_options) 
.end(); 

Answer 1

Click here to see a demo.

Lorsque vous vous trouvez hors de portée, la source jQuery UI est facile à modifier. Vous avez juste besoin de modifier la définition de fonction pour _generateMonthYearHeader:

// StackOverflow question: Add option for N/A 
html += '<option value="1900">N/A</option>'; 

Et faire ce changement _selectDay à ommettre l'année où N/A est sélectionné.

// StackOverflow question: format the date 
if (inst.currentYear == 1900) 
    this._selectDate(id, (inst.currentMonth + 1) + "/" + inst.currentDay); 
else 
    this._selectDate(id, this._formatDate(inst, inst.currentDay, 
        inst.currentMonth, inst.currentYear)); 

Dans le panneau de script que vous avez le script de l'interface utilisateur de base, le script datpicker modifié, et la configuration:

$(document).ready(function() { 
    var year = new Date().getFullYear(); 

    $(".mng-birthday").datepicker({ 
     changeYear: true, 
     // The year range is from the current year to 100 years before 
     yearRange: (year - 100) + ":" + year, 
     // The default date is january 1st fifty years before the current year 
     defaultDate: "01/01/1900" 
    }); 
});