# j-TimePicker

> Die Komponente muss manuell aufgerufen werden oder funktioniert automatisch mit der Komponente j-Input. Diese Komponente ist ein Singleton.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 0d4df90c22b2800485d775b9fc5c0f1a10b41c1c2a3cf33c11b6b8bd3284fc58
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- unterstützt den __Dark-Modus__


__Konfiguration__:

- `seconds {Boolean}` optional, aktiviert Sekunden (Standard: `false`)
- `ampm {Boolean}` optional, aktiviert das 12-Stunden-Zeitformat (Standard: `false`)

Die Komponente muss manuell aufgerufen werden oder funktioniert automatisch mit der Komponente `j-Input`. Diese Komponente ist ein Singleton.

- __important__ Fügen Sie die Komponente unter dem Element `<body>` hinzu

## Nutzung

```javascript
var opt = {};

// opt.offsetX {Number}    : adds X offset (default: 0)
// opt.offsetY {Number}    : adds Y offset (default: 0)
// opt.seconds {Boolean}   : shows seconds (default: false)
// opt.ampm    {Boolean}   : shows 12 hours time format (default: false)
// opt.align   {left|center|right} (default: left)

opt.value = new Date();
// or
// opt.value = 'path.to.date' (in this case you don't need to declare "opt.callback")

opt.element = YOUR_ELEMENT;

opt.callback = function(date) {
	console.log(date);
};

// opt.close {Function} optional, this function can determine the closing of TimePicker

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

Verwenden Sie es mit `<ui-component name="timepicker">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<a href="#timepicker">SHOW TIMEPICKER <ui-bind path="form.date" config="html:value.format('HH\:mm\:ss')"></ui-bind></a>
<ui-component name="timepicker"></ui-component>

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

	$('a[href="#timepicker"]').on('click', function(e) {
		var opt = {};
		opt.element = this;
		opt.value = 'form.date';
		opt.seconds = true;
		SETTER('timepicker/toggle', opt);
	});
</script>
```