# Idő és dátum, fájlfeltöltés, képfeltöltés

> A dátumválasztó beállításai és a speciális dátumkonfiguráció, valamint a fájl- és képfeltöltő mezők korlátai, engedélyezett típusai és a képkivágás.

Mindhárom mező az **Általános mezők** csoportban van. A hozzáadás és a ceruza ikonos szerkesztés az [Űrlapmezők áttekintése](https://hub.hellowp.io/hu/plugins/fluentformpro/mezok-attekintes/) szerint történik. A **Fájlfeltöltés** és a **Képfeltöltés** a kiegészítővel érhető el.

## Idő és dátum

Dátum és idő kiválasztására szolgáló mező, naptár-felugróval.

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

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

| Beállítás | Mit csinál |
| --- | --- |
| **Elem címkéje** | A mező felirata. |
| **Címke elhelyezése** | **Alapértelmezett**, **Felül**, **Jobb**, **Alul**, **Bal** vagy **Címke elrejtése**. Az **Alapértelmezett** a globális beállítást követi. |
| **Admin mezőcímke** | A beküldések megtekintésekor látszó név. |
| **Helykitöltő** | Az üres mezőben látszó szöveg. |
| **Dátumformátum** | A legördülőből választott formátum, amelyben a dátum megjelenik. |
| **Kötelező** | Kötelezővé teszi a mezőt. |

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

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

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

| Beállítás | Mit csinál |
| --- | --- |
| **Autocomplete** | Megmondja a böngészőnek, milyen adatot gyűjt a mező, hogy felkínálhassa a mentett adatokat. Lehet **Automatic**, **off**, **None** vagy konkrét érték. Részletek: [Automatikus kitöltés](https://hub.hellowp.io/hu/plugins/fluentformpro/mezok-automatikus-kitoltes/). |
| **Alapértelmezett érték** | Fix vagy rövidkóddal dinamikusan előtöltött érték. A jobb oldali három pontos gombbal szúrhatsz be rövidkódot. |
| **Konténerosztály** | Egyedi CSS-osztály a mező burkolóján. |
| **Elem osztálya** | Egyedi CSS-osztály a beviteli elemen. |
| **Súgóüzenet** | Útmutató szöveg a mező alatt. |
| **Névattribútum** | A mező HTML neve, általában nem kell módosítani. |
| **Speciális dátumbeállítás** | A naptár finomhangolása JSON-objektummal (lásd lentebb). |
| **Feltételes logika** | Megjelenés szabályokhoz kötve. |

### Speciális dátumbeállítás

A dátumválasztó a Flatpickr JavaScript-könyvtárra épül, ezért haladó felhasználók a **Speciális dátumbeállítás** mezőbe érvényes JavaScript-objektumot írhatnak. Csak érvényes objektum működik, ezért mentés előtt ellenőrizd.

Alapértelmezetten a hét vasárnappal kezdődik. Hétfői kezdéshez:

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

A leggyakoribb beállítások:

| Opció | Típus | Alapérték | Mit csinál |
| --- | --- | --- | --- |
| `altFormat` | szöveg | „F j, Y” | A `dateFormat`-hoz hasonló formátum az `altInput` mezőhöz. |
| `altInput` | logikai | false | A kitöltőnek olvasható dátumot mutat (az `altFormat` szerint), a szervernek viszont más formátumot ad át. |
| `altInputClass` | szöveg | üres | CSS-osztály az `altInput` által létrehozott mezőhöz. |
| `allowInput` | logikai | false | Engedi a dátum közvetlen begépelését. Alapból tiltott. |
| `appendTo` | HTML-elem | null | A naptárt a megadott elembe teszi a `body` helyett. |
| `ariaDateFormat` | szöveg | „F j, Y” | A naptár napjainak aria-címkéje, képernyőolvasókhoz. |
| `clickOpens` | logikai | true | A mezőre kattintás megnyitja-e a naptárt. |
| `dateFormat` | szöveg | „Y-m-d” | A dátum megjelenési formátuma a mezőben. |
| `defaultDate` | szöveg | null | A kezdetben kijelölt dátum(ok). Több dátumnál vagy tartománynál tömb. |
| `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 mobilon is a saját választó jelenik meg a natív helyett. |
| `enableTime` | logikai | false | Bekapcsolja az időválasztót. |
| `enableSeconds` | logikai | false | Másodperc az időválasztóban. |
| `formatDate` | függvény | null | Egyedi dátumformázó függvény. |
| `hourIncrement` | egész | 1 | Az óra léptéke. |
| `minuteIncrement` | egész | 5 | A perc léptéke. |
| `inline` | logikai | false | A naptár a mező mellett, állandóan látszik. |
| `maxDate` | szöveg/dátum | null | A legkésőbbi választható dátum (ez is választható). |
| `minDate` | szöveg/dátum | null | A legkorábbi választható dátum (ez is választható). |
| `mode` | szöveg | „single” | `single`, `multiple` vagy `range`. |
| `nextArrow` | szöveg | > | A hónapváltó nyíl HTML-je. |
| `noCalendar` | logikai | false | Elrejti a napválasztót. Az `enableTime`-mal együtt tiszta időválasztót kapsz. |
| `onChange`, `onClose`, `onOpen`, `onReady` | függvény | null | Eseménykezelők: kijelöléskor, bezáráskor, megnyitáskor, betöltéskor. |
| `parseDate` | függvény | false | Dátumszövegből dátumobjektumot képező függvény. |
| `position` | szöveg | „auto” | A naptár helye a mezőhöz képest: `auto`, `above` vagy `below`. |

## Fájlfeltöltés

A kitöltő fájlokat küldhet be az űrlappal: dokumentumok, pályázatok, ügyfélszolgálati csatolmányok.

![A Fájlfeltöltés mező beállításai](./kepek/mezok-2-fajlfeltoltes-alap.webp)

*A Fájlfeltöltés mező beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=6&route=editor)

| Beállítás | Mit csinál |
| --- | --- |
| **Elem címkéje** | A mező felirata. |
| **Gomb szövege** | A feltöltőgomb felirata, például „Fájl kiválasztása”. |
| **Feltöltőgomb felülete** | **Gomb** (hagyományos) vagy **Dropzone** (húzással is feltölthető terület). |
| **Címke elhelyezése**, **Admin mezőcímke** | Mint a többi mezőnél. |
| **Kötelező** | Legalább egy fájlt fel kell tölteni. |
| **Maximális fájlméret** | Méretkorlát KB vagy MB egységben. |
| **Globális Hibaüzenet** (a mérethez) | A túl nagy fájl hibaüzenete. A kapcsolót kikapcsolva egyedi üzenetet írhatsz. |
| **Fájlok maximális darabszáma** | Hány fájlt tölthet fel a kitöltő. |
| **Globális Hibaüzenet** (a darabszámhoz) | A túl sok fájl hibaüzenete, szintén egyedire cserélhető. |
| **Engedélyezett fájlok** | A jelölőnégyzetekkel kiválasztott típusok: képek (jpg, jpeg, gif, png, bmp), hang, videó, PDF, dokumentumok (doc, ppt, pps, xls, mdb, docx, xlsx, pptx, odt, odp, ods, odg, odc, odb, odf, rtf, txt) és zip-archívumok. |

![A Fájlfeltöltés speciális beállításai](./kepek/mezok-2-fajlfeltoltes-halado.webp)

*A Fájlfeltöltés speciális beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=6&route=editor)

A **Speciális beállítások** között van a **Konténerosztály**, az **Elem osztálya**, a **Súgóüzenet**, a **Névattribútum** és a **Feltételes logika**. A **Fájl tárolási helyének típusa** megmondja, hova kerüljenek a feltöltött fájlok: **A globális beállítások szerint** (az alapértelmezett tárolóhely) vagy **Egyéni** (megadott útvonal).

## Képfeltöltés

Képek beküldésére szolgál: jelentkezések, regisztrációk, profilképek.

![A Képfeltöltés mező beállításai](./kepek/mezok-2-kepfeltoltes-alap.webp)

*A Képfeltöltés mező beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=6&route=editor)

A beállítások nagyrészt a fájlfeltöltőével egyeznek: **Elem címkéje**, **Gomb szövege**, **Feltöltőgomb felülete** (**Gomb** vagy **Dropzone**), **Címke elhelyezése**, **Admin mezőcímke**, **Kötelező**, **Maximális fájlméret** és **Fájlok maximális darabszáma**, mindkettőhöz módosítható hibaüzenettel. Eltérések:

- **Engedélyezett képek**: a **JPG**, **PNG** és **GIF** közül jelölheted be, mit fogadjon el. A tiltott formátumhoz saját hibaüzenet is megadható.
- **Fájl tárolási helyének típusa**: **A globális beállítások szerint** vagy **Egyéni**. Egyéni esetén a feltöltések az alapértelmezett helyre, a WordPress médiatárba, vagy mindkettőbe kerülhetnek.

### Kivágás

A **Kivágás bekapcsolása** jelölőnégyzettel a kitöltő beküldés előtt megvághatja a képet. Csak a megvágott kép töltődik fel, és a szerver is ezt ellenőrzi. Alapból ki van kapcsolva, így a meglévő űrlapok nem változnak.

![A Képfeltöltés kivágási beállításai](./kepek/mezok-2-kepfeltoltes-kivagas.webp)

*A Képfeltöltés kivágási beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=6&route=editor)

A **Kivágás típusa** két lehetőség:

- **Kivágási arány**: a **Körülvágási arány** legördülőből kész arányt választasz: **Free** (alapérték, kötetlen vágás), 1:1 (négyzet, profilképhez), 4:3, 16:9, valamint az álló 3:4 és 9:16.
- **Szélesség és magasság**: pontos méretet adsz meg képpontban (**Szélesség**, **Magasság**), így a kép fix méretre vágható.

A speciális beállítások itt is a **Konténerosztály**, az **Elem osztálya**, a **Súgóüzenet**, a **Névattribútum** és a **Feltételes logika**.