Päivämääräkenttä
Kerää päivämääriä tarkasti ja hallitusti. Ajanvarauksista syntymäaikoihin joustavan muotoilun, päivämäärävälirajoitusten ja älykkään validoinnin avulla – Päivämäärä-kenttä tarjoaa natiiveja kalenterivalitsimia tehokkailla ohjaimilla menneille päivämäärille, tuleville päivämäärille, viikonlopuille ja mukautetuille aikaväleille.
Ammattimainen tietojen kerääminen älykkäällä validoinnilla
Täydellinen:
Tehokkaita ominaisuuksia jokaiseen käyttötarkoitukseen
📅 Neljä päivämäärämuotoa
Valitse alueelliset asetukset:
Ensimmäinen vuosi: 31.12.2023 (ISO 8601)
Kansainvälinen standardimuoto. Paras tietokantoihin, lajitteluun ja teknisiin sovelluksiin.
Kuukausi ensin: 31.12.2023 (Yhdysvaltain tyyli)
Amerikkalainen muoto. Yhdysvaltalaisille käyttäjille tutuin kuukausi-päivä-vuosi -muodossa.
Ensimmäinen päivä: 31.12.2023 (Iso-Britannian tyyliin)
Brittiläinen/eurooppalainen muoto päivä-kuukausi-vuosijärjestyksessä. Yleinen kansainvälisesti.
Päivän ensimmäinen viivoilla: 31.12.2023
Vaihtoehtoinen eurooppalainen muoto, jossa käytetään viivoja kauttaviivojen sijaan.
Miksi formaatilla on väliä:
Vastaa käyttäjien odotuksia alueittain
Estää sekaannuksia ja virheitä
Varmistaa yhdenmukaisen tiedontallennuksen
Parantaa lomakkeiden täyttöastetta
Näytön mukauttaminen:
Muoto vaikuttaa siihen, miten päivämäärät näkyvät käyttäjille, mutta säilyttää samalla sisäisesti vakiotallennusmuodon.
📏 Päivämääräalueen rajoitukset
Valittavien päivämäärien hallinta:
Ensimmäinen sallittu päivämäärä (vähintään):
Aseta aikaisin päivämäärä, jonka käyttäjät voivat valita. Tätä aiemmat päivämäärät on poistettu käytöstä kalenterivalitsimessa.
Esimerkkejä:
- Tapahtuman ilmoittautuminen: Min. päivämäärä = tapahtuman julkistamispäivämäärä
- Ajanvaraus: Minimipäivä = tänään (ei aiempia varauksia)
- Historiatiedot: Min. päivämäärä = yrityksen perustamispäivä
- Projektin määräajat: Minimipäivä = projektin aloituspäivä
Viimeinen sallittu päivämäärä (enintään):
Aseta viimeisin päivämäärä, jonka käyttäjät voivat valita. Tämän jälkeiset päivämäärät on poistettu käytöstä kalenterivalitsimessa.
Esimerkkejä:
- Ennakkoilmoittautuminen: Maksimipäivä = määräaika
- Rajoitettu saatavuus: Enimmäispäivä = viimeinen saatavilla oleva päivämäärä
- Historialliset tiedot: Maksipäivämäärä = tänään
- Tarkka aikaraja: Enimmäispäivämäärä = kampanjan päättymispäivä
Pika-asetuspainikkeet:
Aseta min/max-päivämäärät tälle päivälle yhdellä napsautuksella tai poista rajoitukset välittömästi.
⏮️ Estä menneet päivämäärät
Estä aiempien päivämäärien valitseminen:
Ota käyttöön ”Estä menneet päivämäärät” poistaaksesi käytöstä kaikki päivämäärät ennen tätä päivää. Käyttäjät voivat valita vain tämän päivän tai tulevat päivämäärät.
Täydellinen:
- Ajanvaraukset (ei vanhoja aikoja)
- Tapahtumailmoittautuminen (vain tuleviin tapahtumiin)
- Toimituspäivämäärän valinta (tulevat toimitukset)
- Varausjärjestelmät (ennakkovaraukset)
- Määräajat (täytyy olla tulevaisuudessa)
Älykäs käyttäytyminen:
Päivittyy automaattisesti päivittäin – tämän päivän päivämäärä on aina voimassa, eilisen päivämäärä poistuu käytöstä. Manuaalista päivämääränhallintaa ei tarvita.
Yhdistää muihin rajoituksiin:
Käytä yhdessä maksimipäivämäärän kanssa luodaksesi tulevia varauksia (esim. varauksia tästä päivästä 30 päivään eteenpäin).
⏭️ Estä tulevat päivämäärät
Estä tulevien päivämäärien valitseminen:
Ota käyttöön ”Estä tulevat päivämäärät” poistaaksesi käytöstä kaikki tämän päivän jälkeiset päivämäärät. Käyttäjät voivat valita vain tämän päivän tai menneet päivämäärät.
Täydellinen:
- Syntymäaikakokoelma (ei voi olla tulevaisuus)
- Historiallisten tapahtumien päivämäärät (vain menneet)
- Kokemuksen aloituspäivät (milloin aloitit?)
- Valmistumispäivät (jo tapahtuneet)
- Merkkipäivät (menneet tapahtumat)
Todellinen käyttö:
Varmistaa päivämäärän loogisen syöttötavan – syntymäaikojen, palkkauspäivien ja valmistumispäivien on oltava menneisyydessä.
Sisäänrakennettu validointi:
Selain estää virheelliset valinnat automaattisesti. Ei hämmentäviä virheilmoituksia.
📆 Poista käytöstä viikonloput
Estä lauantain ja sunnuntain valinta:
Ota käyttöön ”Ei viikonloppuvalintaa”, jos haluat poistaa lauantait ja sunnuntait käytöstä kalenterivalitsimessa. Vain arkipäivät (maanantai-perjantai) voidaan valita.
Täydellinen:
- Yritysajanvaraukset
- Toimiston toimitusten aikataulutus
- Konsultaatiopäivän valinta
- Huoltoajat (vain ma-pe)
- B2B-kokousten aikataulutus
Älykkäät vuorovaikutukset:
Jos käyttäjä jostain syystä valitsee viikonlopun (näppäimistöllä), järjestelmä korjaa automaattisesti seuraavan maanantain. Saumaton suojaus.
Yhdistää muihin vaihtoehtoihin:
Toimii menneiden/tulevien rajoitusten kanssa – vain sallitun alueen sisällä olevat viikonpäivät ovat valittavissa.
🎯 Oletuspäivämäärän asetukset
Valitse aloituspäivät etukäteen:
Ei ennalta valittua päivämäärää (tyhjä):
Kenttä alkaa tyhjänä. Käyttäjien on itse valittava päivämäärä. Paras vaihtoehto päivämäärille, jotka vaihtelevat suuresti.
Tämän päivän päivämäärä:
Täyttää automaattisesti nykyisen päivämäärän latauksen yhteydessä. Päivittyy dynaamisesti joka päivä.
Käytä koteloita:
- ”Kyselyn päivämäärä” -kentät
- Aikaleimalomakkeet
- Nykyisen päivämäärän dokumentaatio
- Tämän päivän aikatauluvalinnat
Huomisen päivämäärä:
Täyttää automaattisesti huomisen päivämäärän. Täydellinen seuraavan päivän varauksiin.
Käytä koteloita:
- Seuraavan päivän toimituksen valinta
- Huomisen ajanvaraukset
- Tulevien tapahtumien oletusarvot
- Saatavuus seuraavana päivänä
Mukautettu tietty päivämäärä:
Valitse mikä tahansa kiinteä päivämäärä esivalittavaksi. Sopii erinomaisesti ehdotettuihin päivämääriin tai tapahtumakohtaisiin lomakkeisiin.
Käytä koteloita:
- Suositeltu tapaamispäivä
- Tapahtuman päivämäärän oletusarvot
- Määräaikaehdotukset
- Esitäytetyt hakemuspäivät
📱 Alkuperäinen kalenterivalitsin
Selaimelle optimoitu päivämäärän valinta:
Käyttää HTML5-natiiveja päivämääräsyötteitä selaimen sisäänrakennetulla kalenterivalitsimella. Tarjoaa tutun, alustakohtaisen käyttökokemuksen.
Alustakohtainen ulkoasu:
- iOS: Kaunis valintapyörä
- Android: Materiaalisuunnittelun kalenteri
- Chrome-työpöytä: Alasvetovalikkokalenteri
- Desktop Safari: Kompakti poimija
- Kaikki optimoitu heidän alustalleen
Hyödyt:
- JavaScript-kirjastoa ei tarvita
- Välitön lataus
- Saatavilla oletuksena
- Näppäimistöllä navigoitava
- Kosketusoptimoitu
- Minimi tiedostokoko
Klikkaa missä tahansa:
Koko kenttä on napsautettavissa kalenterin avaamiseksi. Suuri vuorovaikutusalue parantaa käytettävyyttä.
✅ Älykäs päivämäärän validointi
Sisäänrakennetut validointikerrokset:
Muodon validointi:
Selain varmistaa automaattisesti oikean päivämäärämuodon. Käyttäjät eivät voi syöttää virheellisiä päivämääriä, kuten "2023-13-45".
Alueen validointi:
Min/max-päivämäärät pakotetaan valitsintasolla. Virheelliset päivämäärät on poistettu käytöstä – niitä ei voi valita.
Looginen validointi:
Menneet/tulevat/viikonlopun rajoitukset otetaan käyttöön automaattisesti. Järjestelmä estää virheelliset valinnat.
Tyhjennä virheilmoitukset:
Jos käyttäjät jotenkin ohittavat rajoitukset, selkeät viestit selittävät: ”Päivämäärän on oltava 1.1.2024 jälkeen” tai ”Päivämäärän on oltava ennen 31.12.2024”.
🔀 Ehdollinen logiikka
Dynaamisen päivämääräkentän näkyvyys:
Näytä tai piilota päivämääräkentät muiden lomakearvojen perusteella. Näytä asiaankuuluvat päivämääräkentät vain tarvittaessa.
Edistyneet logiikan säännöt:
- JA-logiikka – Kaikkien ehtojen on täytyttävä
- TAI-logiikka – Mikä tahansa ehto voi laukaista toiminnon
- 8 operaattoria – Yhtä suuri kuin, Ei yhtä suuri kuin, Suurempi kuin, Pienempi kuin, Sisältää, On tyhjä ja paljon muuta
Käytä koteloita:
- Näytä ”Toivottu päivämäärä” vain, kun varaustyyppi on ”Ajanvaraus”
- Näytä ”Tapahtuman päivämäärä”, kun tapahtumatyyppi ei ole tyhjä
- Näytä ”Toimituspäivämäärä”, kun toimitustapa on ”Aikataulun mukainen”
- Piilota "Paluupäivä", kun lipun tyyppi on "Yksisuuntainen"
🎯 Parannettu käyttökokemus
Sisäänrakennetut älyominaisuudet:
- Visuaalinen päivämääränäyttö – Valittu päivämäärä näkyy luettavassa muodossa
- Kalenterikuvake – Päivämäärävalitsimen visuaalinen ilmaisin
- Näppäimistön navigointi – Nuolinäppäimet selaavat kalenteria
- Välilehtien esteettömyys – Täysi näppäimistötuki
- Kosketusoptimoitu – Suuret kosketuskohteet mobiililaitteissa
- Automaattinen korjaus – Virheelliset päivämäärät säädetään automaattisesti lähimpään kelvolliseen päivämäärään
- Tämän päivän korostus – Nykyinen päivämäärä korostettuna valitsimessa
- Pikavalinta – Napsauta päivämäärää, valitsin sulkeutuu automaattisesti
- Ohjetekstien tuki – Lisää päivämäärämuotoiluvihjeitä tai ohjeita
- Vaadittu vahvistus – Tee päivämäärän valinnasta pakollinen
- Mukautetut CSS-luokat – Käytä mukautettuja tyylejä
- Esteettömyystuki – ARIA-tarrat, näytönlukuohjelman yhteensopiva
Yksinkertainen asennus 3 vaiheessa
Valmistele päivämääräkenttäsi muutamassa minuutissa
Lisää päivämääräkenttä
Vedä ja pudota Päivämäärä-kenttä Peruskentät-osiosta lomakkeeseen.
Valitse muoto ja alue
Valitse päivämäärämuoto (USA, Iso-Britannia, ISO), aseta halutessasi min/max-päivämäärärajat ja ota käyttöön menneiden/tulevien/viikonloppujen esto tarpeen mukaan.
Aseta oletuspäivämäärä
Valitse, alkaako kenttä tyhjänä, täytetäänkö se etukäteen tänään, huomenna vai määrittämälläsi mukautetulla päivämäärällä.
🎉 Siinä kaikki! Päivämääräkenttäsi on valmis älykkäällä validointitoiminnolla ja natiiveilla valitsimilla.
Reaalimaailman sovellukset
Ajanvaraus
* Lääkärin vastaanottoajat
* Konsultaatioiden aikataulutus
* Palveluajan valinta
* Kokouspäivämäärän koordinointi
Tapahtumaan ilmoittautuminen
* Tapahtuman osallistumispäivät
* Työpajan päivämäärän valinta
* Konferenssiin ilmoittautuminen
* Kurssien ilmoittautumispäivät
Toimitus ja toimitus
* Toivotut toimituspäivät
* Toimituspäivämäärän valinta
* Noutopäivän aikataulutus
* Lähetyspäivämäärän suunnittelu
Business Applications
* Projektin määräajat
* Tehtävien määräajat
* Sopimuksen voimaantulopäivät
* Sopimuksen alkamis- ja päättymispäivät
Henkilökohtaisia tietoja
* Syntymäaikakokoelma
* Merkkipäivät
* Työsuhteen alkamispäivä
* Koulutuksen valmistumispäivät
Varaukset
* Hotellin sisäänkirjautumispäivät
* Vuokrauksen aloituspäivät
* Varauksen vahvistuspäivät
* Varausjakson valinta
Täydelliset kenttäasetukset
Peruskokoonpano
- Kentän otsikko – Päivämääräkentän yläpuolella näkyvä otsikko
- Kuvaus/ohjeteksti – Lisäohjeita käyttäjille
- Pakollinen kenttä – Tee päivämäärän valinnasta pakollinen
- Paikkamerkki – Ei sovellu alkuperäisiin päivämäärävalitsimiin
Päivämäärämuoto
- Päivämäärien näyttäminen:
- Ensimmäinen vuosi: 31.12.2023 (ISO 8601)
- Ensimmäinen kuukausi: 31.12.2023 (Yhdysvaltain tyyliin)
- Ensimmäinen päivä: 31.12.2023 (Ison-Britannian tyyliin)
- Päivän ensimmäinen viivoilla: 31.12.2023
Ajanjakson rajoitukset
- Ensimmäinen sallittu päivämäärä – Aikaisin mahdollinen päivämäärä, jonka käyttäjät voivat valita (jätä tyhjäksi, jos et halua rajoitusta)
- Viimeisin sallittu päivämäärä – Viimeisin päivämäärä, jonka käyttäjät voivat valita (jätä tyhjäksi, jos et halua rajoitusta)
Päivämäärän estoasetukset
- Estä menneet päivämäärät – Estää kaikkien aiempien päivämäärien valitsemisen
- Estä tulevat päivämäärät – Estää tämän päivän jälkeisten päivämäärien valitsemisen
- Ei viikonloppuvalintaa – Estää lauantaiden ja sunnuntaiden valitsemisen
Aloituspäivämäärän valinta:
- Ei ennalta valittua päivämäärää (tyhjä) – Kenttä alkaa tyhjänä
- Tämän päivän päivämäärä – Nykyinen päivämäärä esitäytetty
- Huomisen päivämäärä – Seuraava päivä esitäytetty
- Tarkka päivämäärä (valitset itse) – Mukautettu päivämäärä täytetty valmiiksi
Mukautettu oletuspäivämäärä – Valitse aloituspäivämääräsi (näytetään, kun ”Tietty päivämäärä” on valittu)
Ehdollinen logiikka
- Ota käyttöön ehdollinen logiikka – Näytä/piilota ehtojen perusteella
- Logiikkatyyppi
- Kaikkien ehtojen on täytyttävä (JA)
- Mikä tahansa ehto voi täyttyä (TAI)
- Ehtosäännöt
- Näytä/Piilota – Suoritettava toiminto
- Kenttä – Tarkistettava kenttä
- Operaattori – Yhtä suuri kuin, Ei yhtä suuri kuin, Sisältää, Suurempi kuin, Pienempi kuin, On tyhjä, Ei ole tyhjä
- Arvo – Vertailuarvo
- Useita ehtoja – Lisää rajattomasti sääntöjä
Lisäasetukset
- Piilotettu kenttä – Tee kentästä näkymätön, mutta lisää päivämäärä lähetyksiin
- Mukautetut CSS-luokat – Käytä mukautettuja tyylejä
- Esteettömyysominaisuudet – ARIA-tunnisteet näytönlukijoille
Miksi valita päivämääräkenttämme?
✅ Useita formaatteja – US, UK, ISO ja katkoviivamuodot
✅ Päivämääräalueen hallinta – Aseta min/max-rajat tarkasti
✅ Estä menneet päivämäärät – Salli vain tulevien päivämäärien valinnat
✅ Estä tulevat päivämäärät – Salli vain menneiden päivämäärien valinnat
✅ Poista käytöstä viikonloput – Vain arkipäivisin saatavilla oleva vaihtoehto yrityksille
✅ Älykkäät oletusasetukset – Täytä etukäteen tänään, huomenna tai mukautetulla päivämäärällä
✅ Natiivit valitsimet – Selainoptimoidut kalenterit kullekin alustalle
✅ Automaattinen vahvistus – Virheellisiä päivämääriä ei voi valita
✅ Täysin integroitu – Toimii saumattomasti kaikkien lomakeominaisuuksien kanssa
Usein Kysytyt Kysymykset
K: Mitä päivämäärämuotoja tuetaan?
Neljä formaattia: ISO (2023-12-31), US (31.12.2023), UK (31.12.2023) ja Dashed (31.12.2023). Valitse formaatti, joka parhaiten sopii kohdeyleisöösi.
K: Miten estän käyttäjiä valitsemasta menneitä päivämääriä?
Ota käyttöön ”Estä menneet päivämäärät”. Tätä päivää edeltäviä päivämääriä ei voi valita päivämäärävalitsimessa.
K: Voinko rajoittaa päivämäärät tiettyyn aikaväliin?
Kyllä. Määritä "Ensimmäinen sallittu päivämäärä" ja "Viimeinen sallittu päivämäärä" rajoittaaksesi valinnat tiettyyn ikkunaan.
K: Mitä ”Viikonloppujen poistaminen käytöstä” tekee?
Se poistaa lauantait ja sunnuntait valittavilta. Vain maanantaista perjantaihin on edelleen käytettävissä.
K: Miten oletuspäivämäärät toimivat?
Valitse, alkaako kenttä tyhjänä, näyttääkö se tämän päivän päivämäärän, huomisen päivämäärän vai mukautetun päivämäärän. Tämä päivä ja huominen säätyvät automaattisesti.
K: Näyttääkö päivämäärävalitsin samalta kaikissa laitteissa?
Ei. Se käyttää kunkin laitteen omaa käyttöliittymää – iOS:n kiekkovalitsimia, Android-kalentereita, työpöytävalitsimia ja niin edelleen.
K: Voinko estää tulevia päivämääriä syntymäaikakentissä?
Kyllä. Ota käyttöön ”Estä tulevat päivämäärät”, jotta käyttäjät voivat valita vain päivämääriä tähän päivään asti.
K: Miten min/max-päivämäärät toimivat yhdessä menneisyyden/tulevan eston kanssa?
Ne päällekkäin. Esimerkiksi menneiden päivämäärien ja 30 päivän päähän olevan enimmäispäivämäärän estäminen johtaa vaihteluun tästä päivästä 30 päivän päähän.
K: Voivatko käyttäjät kirjoittaa päivämääriä valitsimen sijaan?
Jotkin selaimet sallivat kirjoittamisen ja vahvistuksen. Toiset pakottavat päivämäärävalitsimen. Kaikki käyttävät oikeaa muotoilua.
K: Mitä tapahtuu, jos käyttäjä valitsee viikonlopun, jolloin viikonloput ovat poissa käytöstä?
Järjestelmä säätyy automaattisesti lähimpään kelvolliseen viikonpäivään, tyypillisesti seuraavaan maanantaihin.
K: Voinko käyttää ehdollista logiikkaa päivämääräkenttien kanssa?
Kyllä. Käytä vertailuja, kuten ”Yhtä suuri kuin”, ”On tyhjä”, ”Ei ole tyhjä”, ”Suurempi kuin” tai ”Pienempi kuin”, hallitaksesi muiden kenttien näkyvyyttä.
K: Miten asetan määräajan?
Syötä määräaikasi kohtaan ”Viimeinen sallittu päivämäärä”. Käyttäjät eivät voi valita määräaikoja kyseisen ajankohdan jälkeen. Yhdistä tähän ”Estä menneet päivämäärät” -kohtaan, jos tarvitset vain tulevaa saatavuutta.
