# Idő és dátum mező

> A dátum- és időválasztó mező beállításai, a dátumformátum és a Flatpickr-alapú speciális dátumbeállítás.

Az **Idő és dátum** mező dátumot és időt kér a látogatótól, naptárból választhatóan. A mező a **Beviteli mezők** panelen található; hozzáadása és a szerkesztő ikon használata ugyanaz, mint a többi mezőnél.

## Beállítások

![Az Idő és dátum mező beállításai](./kepek/mezok-2-ido-datum.webp)

*Az Idő és dátum mező beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&route=editor&form_id=1)

A képen az **Idő és dátum** mező beállításai látszanak: a címke, a **Helykitöltő**, a **Dátumformátum** és a **Kötelező**.

| Beállítás | Mit csinál |
| --- | --- |
| **Elem címkéje** | A mező címe a látogató számára (alapból „Dátum / idő”). |
| **Címke elhelyezése** | **Alapértelmezett**, **Felül**, **Jobb**, **Alul**, **Bal** vagy **Címke elrejtése**. Az alapértelmezett az általános beállítást követi. |
| **Admin mezőcímke** | Másik cím, amelyet csak az adminisztrátor lát a beküldéseknél. |
| **Helykitöltő** | A kitöltetlen mezőben látszó segítő szöveg. |
| **Dátumformátum** | A legördülő listából választhatod ki, milyen alakban jelenjen meg és kerüljön mentésre a dátum (például `d/m/Y`, vagyis 28/04/2018). |
| **Kötelező** | **Igen** esetén a mező kitöltése nélkül nem küldhető be az űrlap. |

## Speciális beállítások

![Az Idő és dátum mező speciális beállításai](./kepek/mezok-2-ido-datum-halado.webp)

*Az Idő és dátum mező speciális beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&route=editor&form_id=1)

A képen a **Speciális beállítások** szakasz látszik; alul a **Speciális dátumbeállítás** mező a Pro változathoz tartozik, ezért az alap telepítésben le van tiltva.

| Beállítás | Mit csinál |
| --- | --- |
| **Autocomplete** | Megmondja a böngészőnek, milyen adatot gyűjt a mező, lásd az [Autocomplete a mezőkön](https://hub.hellowp.io/hu/plugins/fluentform-signature/mezok-autocomplete/) fejezetet. |
| **Alapértelmezett érték** | Előre kitöltött érték. A mező jobb szélén a hárompontos gombbal rövidkódot is megadhatsz, így dinamikusan töltődik ki. |
| **Konténerosztály** | Egyéni CSS-osztály a mező burkolójára. |
| **Elem osztálya** | Egyéni CSS-osztály a beviteli elemre. |
| **Súgóüzenet** | A mező alatt látható útmutató. |
| **Névattribútum** | A HTML `name` attribútuma, általában nem kell módosítani. |
| **Speciális dátumbeállítás** | JSON-beállításobjektum a naptár (Flatpickr) finomhangolására. |
| **Feltételes logika** | A mező megjelenítése vagy elrejtése más mezők értéke alapján. |

## Speciális dátumbeállítás (Flatpickr)

A dátumválasztót a Flatpickr JavaScript-könyvtár adja, ezért a haladó felhasználók a **Speciális dátumbeállítás** mezőbe JSON-objektumot írhatnak, amely felülírja a naptár alapviselkedését.

Például alapból a hét vasárnappal kezdődik. Hétfői kezdéshez:

```json
{
  "locale": {
    "firstDayOfWeek": 1
  }
}
```

A leggyakoribb beállítások:

| Beállítás | Típus | Alapérték | Mit csinál |
| --- | --- | --- | --- |
| `altInput` | logikai | false | A látogatónak olvasható dátumot mutat (az `altFormat` szerint), a szervernek viszont más formátumot küld. |
| `altFormat` | szöveg | „F j, Y” | Ugyanaz, mint a dátumformátum, de az `altInput` mezőhöz. |
| `altInputClass` | szöveg | „” | CSS-osztály az `altInput` mezőhöz. |
| `allowInput` | logikai | false | Engedi, hogy a látogató közvetlenül begépelje a dátumot. |
| `appendTo` | elem | null | A naptárat a megadott elembe teszi a `body` helyett. |
| `ariaDateFormat` | szöveg | „F j, Y” | A naptárnapok `aria-label` formátuma a képernyőolvasóknak. |
| `clickOpens` | logikai | true | A mezőre kattintva nyílik-e a naptár. |
| `dateFormat` | szöveg | „Y-m-d” | A dátum megjelenítési formátuma a mezőben. |
| `defaultDate` | szöveg | null | A kezdetben kijelölt dátum(ok). Többes vagy tartomány módban tömb, egyébként egy dátum. |
| `defaultHour` | szám | 12 | Az óra kezdőértéke. |
| `defaultMinute` | szám | 0 | A perc kezdőértéke. |
| `disable` | tömb | [] | Letiltott dátumok. |
| `enable` | tömb | [] | Engedélyezett dátumok. |
| `disableMobile` | logikai | false | Igaz esetén mindig a saját választó jelenik meg, a telefon natív választója helyett. |
| `enableTime` | logikai | false | Bekapcsolja az időválasztót. |
| `enableSeconds` | logikai | false | Másodperc az időválasztóban. |
| `hourIncrement` | egész | 1 | Az óra lépésköze. |
| `minuteIncrement` | egész | 5 | A perc lépésköze. |
| `inline` | logikai | false | A naptárat beágyazva, mindig látható módon mutatja. |
| `maxDate` | szöveg/dátum | null | A legkésőbbi választható dátum (ezt is beleértve). |
| `minDate` | szöveg/dátum | null | A legkorábbi választható dátum (ezt is beleértve). |
| `mode` | szöveg | „single” | `single`, `multiple` vagy `range`. |
| `noCalendar` | logikai | false | Elrejti a naptárat; az `enableTime` mellett tiszta időválasztót kapsz. |
| `position` | szöveg | „auto” | A naptár helye a mezőhöz képest: `auto`, `above` vagy `below`. |
| `nextArrow` | szöveg | > | A hónapváltó nyíl HTML-je. |
| `formatDate`, `parseDate` | függvény | null | Saját dátumformázó és -értelmező függvény. |
| `onChange`, `onClose`, `onOpen`, `onReady` | függvény | null | Eseménykezelők a dátum változásakor, a naptár bezárásakor, megnyitásakor és betöltődésekor. |

Például csak időt kérő mező:

```json
{
  "enableTime": true,
  "noCalendar": true,
  "dateFormat": "H:i"
}
```