j-Calendar

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Támogatja a sötét módot
támogatja a touch gesztusokat (swipe) és rögzített teljes méretű mobil

konfiguráció:

firstday {Number} (opcionális) a héten első napján
today {String} (opcionális) címke a Set today gombhoz
days {String} (opcionális) napok, például a SU,MO,TU,WE,TH,FR,SA (default).
months {String} (opcionális) hónapok, például January,February,... (meghatározott).
yearselect {Boolean} (opcionális) csökkenés évekkel (default true).
monthselect {Boolean} (opcionális) csökkenés hónapokkal (default true).
A yearfrom {String} (opcionális) minimális év határát állítja be a csökkenésben, például a -5 years current (default -100 years).
yearto {String} (opcionális) beállítja a legmagasabb év határát a lefelé +5 years current (default current).

Az összetevőt manuálisan kell hívni, vagy automatikusan textbox vagy j-Input összetevővel kell működnie.

_only__ a Bootstrap Grid rendszerrel működik (más esetben CSS-t kell javítani)
_ fontos__ adja meg a naptári összetevőt a <body> elem alatt

Használat

var ELEMENT = $(document);
var PATH = 'some.path.to.date';
var X_OFFSET = 100;
FIND('calendar').toggle(ELEMENT, PATH, function(date) {
	console.log('SELECTED DATE:', date);
}, X_OFFSET);

// OR

FIND('calendar').toggle(ELEMENT, 'path.to.date OR date object', 'path.to.binding.date');

Használja a <ui-component name="calendar">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

example.html

<a href="#calendar">SHOW CALENDAR</a>
<ui-component name="calendar" config="today:Set today;firstday:0"></ui-component>

<script>
	var form = {};
	form.date = new Date();

	$('a[href="#calendar"]').on('click', function(e) {
		SETTER('calendar', 'toggle', $(this), form.date, function(date) {
			alert(date);
		});
	});
</script>