j-Calendar

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Stöd för dark mode
stöder touch gesturer (swipe) och fast fullstorlek på mobilen

Konfigurera:

firstday {Numret} (alternativt) första dagen i veckan
today {String} (alternativ) etikett för Set today knappen
days {String} (alternativ) dagar t.ex. SU,MO,TU,WE,TH,FR,SA (default).
months {String} (alternativ) månader t.ex. January,February,... (default).
yearselect {Boolean} (alternativ) nedgång med år (default true).
monthselect {Boolean} (alternativ) nedgång med månader (default true).
yearfrom {String} (alternativt) ställer in minimiårslängd i nedgång, t.ex. -5 years current (default -100 years).
yearto {String} (alternativt) ställer in högsta årsgränsen i nedgång +5 years current (default current).

Komponenten måste kallas manuellt eller fungerar med komponenten textbox eller j-Input automatiskt.

fungerar only med Bootstrap Grid System (i annat fall behöver du fixa CSS)
important Lägg till kalenderkomponenten under elementet <body>

Användning

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');

Använd den med <ui-component name="calendar">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>