# j-DatePicker

> Компонентът трябва да се нарича ръчно или работи с компонента j-Input автоматично.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 22b27df1315551c0841db515ee3d8574628b32819e24f401e4b43f722e7d9289
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Това е подобрена клона на `j-Calendar`
- Поддържат тъмния режим
- Поддържа __touch гестове (swipe)__ и фиксиран пълен размер на мобилния телефон

__Конфигуриране__:

- `firstday {Number}` Първият ден от седмицата (предварително: `DEF.firstdayofweek`)
- `today {String}` етикет за бутона `Set today`
- `clear {String}` етикет за бутона `Clear`
- `days {String}` Денят е. `SU,MO,TU,WE,TH,FR,SA` и по подразбиране.
- `months {String}` Месеци в гр. `January,February,...` и по подразбиране.

Компонентът трябва да се нарича ръчно или работи с компонента `j-Input` автоматично.

- __important__ добавете компонента на календара под елемента `<body>`

## Използване

```javascript
var opt = {};
opt.element = YOUR_ELEMENT;
opt.value = new Date();
// or opt.value = 'path.to.date'; --> then "opt.callback" is disabled
// opt.align {String}      : align "left" (default), "center" or "right"
// opt.position {String}   : position "top" (default) or "bottom"
// NEW: opt.clock {Boolean} : enables time (default: false)
// NEW: opt.ampm {Boolean} : enables AM/PM (default: false)

opt.clear = false; // Removes "clear" button from datepicker. If this property is not specified as "false" - "clear" button will be shown

opt.callback = function(newdate) {
	console.log('date has been changed');
};
// IMPORTANT - opt.callback() can receive "null" value as a parameter, so this check should be taken into consideration when callback function is being created.

// opt.offsetX {Number} "x" offset
// opt.offsetY {Number} "y" offset
// opt.close {Function} optional, this function can determine closing of DatePicker

// NEW and OPTIONAL
// It's callend when the DatePicker changes year/month
opt.badges = function(date, append) {
	// Appends small and red badges to the current view/month
	append([date1, date2, date3]);
};

SETTER('datepicker/show', opt);
```

Използвайте го с `<ui-component name="datepicker">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

```html example.html
<a href="#datepicker">SHOW DATEPICKER: <b><ui-bind path="form.date" config="html:value?value.format('dd.MM.yyyy'):DEF.empty"></ui-bind></b></a>
<ui-component name="datepicker" config="today:Set today;firstday:0"></ui-component>

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

	$('a[href="#datepicker"]').on('click', function(e) {
		var opt = {};
		opt.value = 'form.date';
		opt.element = this;

		// Append badges
		opt.badges = function(date, append) {
			setTimeout(function() {
				append([date.add('-5 days'), date.add('-2 days'), date.add('3 days'), date.add('8 days')])
			}, 1000);
		};

		SETTER('datepicker/show', opt);
	});
</script>
```