Preluarea datei cu jQuery UI


Continuăm mica serie de articole dedicate unor elemente oferite de minunata bibliotecă jQuery UI. Vă propun astăzi să ne oprim la facilitatea de preluare a unei date, utile în diverse contexte. Dacă o fac este pentru că aici apare o problemă de localizare: într-un sit românesc ne-am dori desigur ca zilele şi lunile să fie scrise în română, nu în engleză. Ei bine, în timp ce se oferă oficial posibilitatea de a schimba limba, alegând una dintre limbile suportate, în testele mele am reuşit doar incluzând manual traducerea. Când spun manual mă refer la copy and paste, cum veţi putea şi Dvs face. E vorba de liniile de la 1 la 18. Evident, puteţi modifica după bunul plac (ex: să nu înceapă cu majusculă).

Să trecem la lucru. În forma cea mai simplă calendarul presupune un câmp input şi via ID o „aplicare” a calendarului cu o linie simplă precum linia 20. Observaţi că după ce am ales o dată, ea apare în câmpul input. Ziua de azi va apărea ca 03.10.2012. În al doilea caz am început să configurăm calendarul. Mai exact am dat posibilitatea ca omul să aleagă rapid anul şi luna din liste derulante. E util aşa ceva când vrei să ceri anul naşterii cuiva: altfel e crimă să tot dea înapoi, lună cu lună, până la 1967 de exemplu. În plus am făcut o configurare în afişarea datei alese: acum va apărea pentru azi 2012-10-03!

În al treilea caz avem alte configurări interesante: am fixat ca minim „-2W” adică data aleasă să fie înapoi maxim două săptămâni (2 Weeks); şi la maxim am pus „+1M”, adică maxim peste o lună (1 Month). Foarte tare această facilitate! Poţi ţine internautul în ce interval doreşti tu! Pui 0 la „min” şi eşti sigur că nu alege o dată din trecut! Ei, dar aici am mai făcut o şmecherie. În loc să folosesc input pentru calendar am folosit un div. Astfel calendarul este inline. Teoretic ar putea fi de ajuns în unele scenarii. Dar dacă vrei să se vadă ce s-a ales, atunci poţi să ataşezi data aleasă la un input via altField. Cât priveşte data aleasă… testaţi şi veţi vedea ce a ieşit! Da, se pot diverse formatări pentru dată.

$.datepicker.regional['ro'] = {
    closeText: 'Închide',
   	prevText: '« Luna precedentă',
    nextText: 'Luna următoare »',
    currentText: 'Azi',
    monthNames: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie',
        'Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
    monthNamesShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    dayNames: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
    dayNamesShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
    dayNamesMin: ['Du','Lu','Ma','Mi','Jo','Vi','Sâ'],
    weekHeader: 'Săpt',
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
};
$.datepicker.setDefaults(jQuery.datepicker.regional['ro']);
$("#ziua").datepicker();
$("#candva").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:"yy-mm-dd"
});
$("#altazi").datepicker({
    minDate:"-2W",
    maxDate:"+1M",
    dateFormat:"yy-mm-dd",
    altField: "#afisare",
    altFormat: "DD, d MM yy"
});

Cele văzute mai sus pot fi testate dând click aici


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 3,67 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *