Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další



jQuery UI - Kalendář

Kategorie: jQuery UI

Jak zprovoznit kalendář

Pro zprovoznění kalendáře na vašich stránkách potřebujete několik souborů. První je samotná knihovna jQuery, dále je potřeba základní soubor pro uživatelské rozhraní (jQueryUI.js) a ještě dva css soubory s designem. Důležité je pořadí souborů, jQUery knihovna musí být nad souborem jQueryUI.js. Výsledný kód pak může vypadat takto:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>

Že vše funguje si můžeme ověřit přidáním tohoto kódu:

// HTML část
<input type="text" id="datepicker">

// jQuery část
$(function() {
     $( "#datepicker" ).datepicker();
});

Ukázku najdete zde

Co lze u kalendáře přizpůsobit

U kalendáře můžeme upravit formát data, počet zobrazovaných měsíců, jazyk, aktuální den a rok, zobrazení týdnů, animaci, vypsání data do jiného inputu a omezit data, která má uživatel na výběr.

Používané zkratky pro data

Pro různá nastavení používá kalendář tyto zkratky:

  • mm - úplný měsíc, třeba "03"
  • dd - úplný den, třeba "06"
  • yy - úplný rok, třeba "2010"
  • m - zkrácený měsíc, třeba "3"
  • d - zkrácený měsíc, třeba "6"
  • y - zkrácený rok, třeba "10"
  • M - zkrácený název měsíce, třeba "Bře"
  • D - zkrácený název dne, třeba "Pon"
  • MM - úplný název měsíce, třeba "Březen"
  • DD - úplný název dne, třeba "Pondělí"

Pokud budeme chtít používat vlastní text (třeba při změně formátu), dáme text do uvozovek, třeba "'Den' D 'Měsíc' M".

Změna formátu data

Základní formát data je mm/dd/rrrr (třeba 01/05/2011 - pátý leden roku 2011) a to nemusí všem vyhovovat. Naštestí to lze jednoduše změnit.

// HTML část
<input id="datepicker">

// jQuery část

$("#datepicker").datepicker({dateFormat: "mm-dd-yy"});
// nebo
$("#datepicker").datepicker({dateFormat: "yy-dd-mm"});
//nebo třeba
$("#datepicker").datepicker({dateFormat: "'Den' d 'v' MM 'v roce' yy"});

Ukázku najdete zde

Omezení výběru dat na určité období

Také můžeme ohraničit data, ze kterých může uživatel vybírat. Např. můžeme zabránit, aby vybíral data, která už uběhla.

// HTML část
<input id="datepicker">

// jQuery část

$("#datepicker").datepicker({ minDate: -20, maxDate: "+1M +10D" });
// uživatel může vybírat v období dvacet dnů před dneškem a ještě měsíc a deset dní po dnešku

$("#datepicker").datepicker({ minDate: 0});
// uživatel může vybírat data, která ještě nebyla

$("#datepicker").datepicker({maxDate: 0});
//uživatel může vybírat pouze data z minulosti

Ukázku najdete zde

Vypsání výbraného data do alternativního inputu

Pokud vám nestačí vypsání vybraného data do jednoho inputu, můžete ho vypsat do jiného a to dokonce v jiném formátu.

// HTML část
<input id="datepicker">
<input id="alternativni">

// jQuery část
$( "#datepicker" ).datepicker({
			altField: "#alternativni", // selektor alternativního inputu
			altFormat: "DD, d MM, yy"  // formát alternativního data
});

Ukázku najdete zde

Trvalé zobrazení kalndáře

Jestli potřebujete kalendář zobrazovat pořád a nejen při kliknutí na input, můžete to udělat velmi jednoduše, stačí místo inputu vybrat div.

// HTML část
<div id="datepicker"></div>

// jQuery návod
$("#datepicker").datepicker();

Ukázku najdete zde

Zobrazení panelu s talčítky

Kalednář také obsahuje panel, ve kterém jsou tlačítka "Dnes" a "Hotovo". Zapnout ho můžeme takto:

// HTML část
<input id="datepicker">

// jQuery část
$("#datepicker").datepicker({
			showButtonPanel: true
});

Ukázku najdete zde

Zobrazení selectu s roky a měsíci

Pokud je pravděpodobné, že uživatel bude vybírat datum několik let dopředu, můžeme mu to ulehčit zobrazením selectu s výběrem roků.

// HTML část
<input id="datepicker">

// jQuery část
$( "#datepicker" ).datepicker({
			changeMonth: true, // výběr měsíců
			changeYear: true  // výbeř let
});

Ukázku najdete zde

Data z ostatních měsíců

V základním nastavení zobrazuje kalendář pouze data z aktuálního měsíce a vzniká tak prázdné místo na začátku a na konci měsíce. Místo prázdného místa můžeme zobrazit data z předcházejícího a následujícího měsíce.

// HTML část
<input id="datepicker">

// jQuery část
$("#datepicker").datepicker({
			showOtherMonths: true,
			selectOtherMonths: true
});

Ukázku najdete zde

Zobrazení čísla týdne

Další, co můžeme zobrazit, je číslo týdne.

// HTML část
<input id="datepicker">

// jQuery část
$("#datepicker").datepicker({
			showWeek: true,
			firstDay: 1 // první den je pondělí
});

Ukázku najdete zde

Výběr z více měsíců

Také můžeme zobrazit více měsíců najednou.

// HTML část
<input id="datepicker">

// jQuery část
$( "#datepicker" ).datepicker({
			numberOfMonths: 3 // zobrazí 3 měsíce
});

Ukázku najdete zde

Animace

Při zobrazování kalendáře můžeme použí animaci.

// HTML část
<input id="datepicker">

// jQuery část
$( "#datepicker" ).datepicker({showAnim: "slideDown"});

Ukázku najdete zde

Rozmezí dat - od -> do

Třeba při výběru termínu dovolené je vhodné, aby uživatel použil dva inputy, jeden pro začátek dovolené a druhý pro konec.

// HTML část
Od <input id="from"> Do <input id="to">

// jQuery část
var dates = $( "#from, #to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" );
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});

Ukázku najdete zde

Klávesové zkratky pro výber data

Kalendář lze ovládat pomocí klávesových zkratek.

  • page up/down - předchozí/následující měsíc
  • ctrl+page up/down - předchozí/následující rok
  • ctrl+home - zobrazí aktuální měsíc nebo otevře kalendář, pokud je zavřený
  • ctrl+left/right - předchozí/následující den
  • ctrl+up/down - předchozí/následující týden
  • enter - potvrdí vybrané datum
  • ctrl+end - zavře a smaže datum
  • escape - zavře kalendář bez uložení vybraného data

Utilitní funkce

Kalendář můžeme přizpůsobit ještě pomocí dalších funkcí.

  • $.datepicker.setDefaults(nastavení) - pomocí této funkce můžeme určit výchozí nastavení pro všechny kalendáře
  • $.datepicker.noWeekends - vypne všechny víkendy, nebudou vidět a uživatel je nebude moct vybrat

Zdroj:

Lokalizace do češtiny a slovenčtiny

Jak už jsem se zmínil výše, můžeme kalendář přeložit do češtiny.

// HTML část
<input id="datepicker">

// jQuery část

$.datepicker.regional['cs'] = { 
                closeText: 'Cerrar', 
                prevText: 'Předchozí', 
                nextText: 'Další', 
                currentText: 'Hoy', 
                monthNames: ['Leden','Únor','Březen','Duben','Květen','Červen', 'Červenec','Srpen','Září','Říjen','Listopad','Prosinec'],
                monthNamesShort: ['Le','Ún','Bř','Du','Kv','Čn', 'Čc','Sr','Zá','Ří','Li','Pr'], 
                dayNames: ['Neděle','Pondělí','Úterý','Středa','Čtvrtek','Pátek','Sobota'], 
                dayNamesShort: ['Ne','Po','Út','St','Čt','Pá','So',], 
                dayNamesMin: ['Ne','Po','Út','St','Čt','Pá','So'], 
                weekHeader: 'Sm', 
                dateFormat: 'dd.mm.yy', 
                firstDay: 1, 
                isRTL: false, 
                showMonthAfterYear: false, 
                yearSuffix: ''}; 

$.datepicker.regional['sk'] = {
                closeText: 'Zavrieť',
                prevText: '<Predchádzajúci',
                nextText: 'Nasledujúci>',
                currentText: 'Dnes',
                monthNames: ['Január','Február','Marec','Apríl','Máj','Jún',
                'Júl','August','September','Október','November','December'],
                monthNamesShort: ['Jan','Feb','Mar','Apr','Máj','Jún',
                'Júl','Aug','Sep','Okt','Nov','Dec'],
                dayNames: ['Nedel\'a','Pondelok','Utorok','Streda','Štvrtok','Piatok','Sobota'],
                dayNamesShort: ['Ned','Pon','Uto','Str','Štv','Pia','Sob'],
                dayNamesMin: ['Ne','Po','Ut','St','Št','Pia','So'],
                weekHeader: 'Ty',
                dateFormat: 'dd.mm.yy',
                firstDay: 0,             
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''};

$.datepicker.setDefaults($.datepicker.regional['cs']);
 
$("#datepicker").datepicker();

Ukázku najdete zde

(za lokalizaci do češtiny děkuji uživateli Pate)

http://jqueryui.com/demos/datepicker/

Zobrazit diskuzi