Šiame pamokymo vadove tau parodysiu, kaip įgyvendinti datų ir laiko įvedimą savo internetiniuose formose. Aiškinsiu, kokie skirtingi įvedimo tipai tau yra suteikiami ir suteiksiu naudingų patarimų praktiniam naudojimui. Mes aptarsime tiek datos, tiek laiko įvedimą, kad įgytum gilią supratimą apie šių funkcijų implementaciją.
Svarbiausi įžvalgos
- Įvesties tipas data leidžia pasirinkti tik datą.
- Įvesties tipas dateTime-local kombinuoja datą ir laiką be laiko juostų prisitaikymo.
- Datų ir laiko įvedimas formatuojamas pagal standartinį ISO 8601.
- Naršyklės gali turėti skirtingus datų ir laiko įvedimo rodiklius.
Datų ir laiko įvedimo pagrindai
Kad įgyvendintum datų ir laiko įvedimą savo formose, tau reikės HTML įvesties tipų date, dateTime-local ir time. data įvesties tipas leidžia vartotojui pasirinkti datą, o dateTime-local tipas užfiksuoja tiek datą, tiek laiką. Paskutinis siunčia informaciją be laiko juostų prisitaikymo, kas reiškia, kad įvedimas siunčiamas į serverį tokį, koks yra vartotojo nurodytas.
Dabar išsamiau pažiūrėkime į šiuos tipus.
Naudoti date įvesties tipą
Norint gauti gryną datą, galima naudoti tipo datą. Tai leidžia vartotojui pasirinkti datą per integruotą kalendoriaus įrankį, pagerinant vartotojo patogumą.
Atidarę kalendoriaus įrankį, galite pasirinkti skirtingas datas ir jas pateikti, paspaudę „Pateikti“. Čia data perduodama standartiniu formatu: Metai-Mėnuo-Diena.
Svarbu žinoti, kad kalendoriaus rodymas gali skirtis priklausomai nuo naudojamos naršyklės. Jūsų operacinės sistemos nustatytos regioninės nuostatos paveiks formato, kuriuo data bus pateikta, rodymą.
Datų ir laiko įvedimas naudojant dateTime-local
Jei norite įvesti tiek datą, tiek laiką, turėtumėte naudoti tipo dateTime-local. Tai veikia panašiai kaip datų užklausa, bet su galimybe nurodyti laiką taip pat.
Čia galite pasirinkti tiek dieną, tiek laiką. Įdomu tai, kad laikas rodomas 24 valandų formatu, jei jūsų vietinėse nuostatose nėra įjungtas AM/PM formatas.
Siųsdami formą, duomenys taip pat bus pateikti ISO formatu ir laikas lieka nepakeistas, nekonvertuojant į kitą laiko juostą.
Naudoti laiką
Laiko įvesties tipas leidžia jums nurodyti tik laiką be datos. Per šį tipą galite pasirinkti laiką, kuris taip pat bus perduotas 24 valandų formatu.
Papildomų datų formatų įtraukimas
Be minėtų tipų, taip pat yra galimybė įgyvendinti savaitę (week) ir mėnesį (month) įvedimą. Naudodamiesi savaitės formatais galite nurodyti konkretų savaitę ir lengvai pasirinkti norimą savaitę.
Mėnesio formate taip pat galite pasirinkti tik mėnesį, nenurodydami konkrečių dienų.
Numatytosios reikšmės ir vertės
Papildomas naudingas patarimas yra galimybė nustatyti numatytasias reikšmes savo įvedimo laukams. Taip galite, pavyzdžiui, nustatyti, kad renkantis datą ir laiką, tam tikra data būtų nustatyta pagal numatytuosius nustatymus.
Laiko juostos ir naršyklės suderinamumas
Vienas iš svarbiausių dalykų, kai naudojami datos ir laiko įrašai, yra laiko juosta. Įvestys saugomos taip, kaip jos įvestos vietiniu laiku. Šiuo atveju nėra laiko juostų pritaikymo, todėl vietinį laiką galite perduoti tiesiogiai.
Tačiau svarbu atkreipti dėmesį, kad šių įvedimo tipų palaikymas gali skirtis priklausomai nuo naršyklės. Nors date ir dateTime-local beveik visų populiarių naršyklių palaikomi, rekomenduojama patikrinti, ar konkretūs funkcijos veikia jūsų pagrindinės auditorijos naršyklėse naudojant svetaines, pavyzdžiui, "Can I use".
Santrauka
Suvedžiojote, kaip įgyvendinti datos ir laiko įvedimą į savo svetainių formos. Jūs žinote skirtingus įvedimo tipus, jų formatą ir vartotojo nustatymų reikšmę. Atminkite, kad tinkamas formatavimas ir naršyklės palaikymas yra būtini norint sukurti sklandų patirtį jūsų vartotojams.
Dažnai užduodami klausimai
Koks skirtumas tarp date ir dateTime-local?date leidžia pasirinkti tik datą, tuo tarpu dateTime-local leidžia pasirinkti tiek datą, tiek laiką.
Kaip laiko juosta yra tvarkoma naudojant dateTime-local?Laikas persiunčiamas taip, kaip jis buvo įvestas vietiniu laiku, be jokios laiko juostų pritaikymo.
Kurios naršyklės palaiko šiuos įvesties tipus?Dažniausios naršyklės palaiko date ir dateTime-local; dėl konkrečių funkcijų galima konsultuotis su "Can I use".
Ar galiu nustatyti numatytas datas lauko įvestims?Taip, galite nustatyti numatytas reikšmes įvesties laukams naudodami value atributą.
Kokios formos yra naudojamos persiuntimo metu?Duomenys siunčiami ISO formatu (Metai-Mėnuo-Diena datams, Metai-Mėnuo-Diena T Valandos:Minutės:Sekundės datoms ir laikui).