Kotisivu » Web-suunnittelu » Luo minimalistinen datatulotulo valitsemalla Flatpickr

    Luo minimalistinen datatulotulo valitsemalla Flatpickr

    Yksi hankalimmista luodavista kentistä on päivämäärä / aika. Kehittäjät käyttävät usein yksinkertaisia ​​valikkovalikkoja kuukauden / päivän / vuoden aikana tai luottavat erilaisiin laajennuksiin työn tekemiseen.

    Valitse kentät hienosti, mutta ne ovat hieman clunkyja. Sen sijaan voit muokata lomakkeesi Flatpickr-laajennus. Se on a ilmainen, avoimen lähdekoodin JavaScript-kalenterivalitsin, jossa on nolla-riippuvuudet.

    Se oli suunniteltu minimalismia ajatellen, joten se mahtuu mihin tahansa verkkosivuston ulkoasuun, mihin tahansa web-muotoon, ja sen pitäisi olla käytettävissä kaikilta nykyaikaisilta laitteilta.

    Yksi mukava asia tästä pluginista on erilaisia ​​mukautettuja asetuksia. Voit päivittää, miten päivämäärät näkyvät tekstikentässä ja missä kalenteri alkaa (oletusarvo on käytössä) “tänään”).

    Mutta voit myös käytä sitä niin tiukasti päivämääränvalitsijana jos et tarvitse aikaa. Se on vain valinnainen ominaisuus, jonka avulla voit siirtää lisää tietoja lomakkeen avulla.

    Katsokaa Esimerkkien sivu nähdä Flatpickrin toiminnassa.

    Voit myös aseta kohdennettuja vaihtoehtoja rajoittaa päivämääränvalitsimen käyttäytymistä, kuten:

    • Tiettyjen päivämäärien / alueiden poistaminen käytöstä
    • Vain tietyt päivämäärät / alueet sallitaan
    • Useiden päivämäärävalintojen salliminen
    • “Alue-tila” valitaksesi aloitus- ja lopetuspäivän
    • Vain päivämääränvalitsin tai vain aika tai molemmat päivämäärä ja aika yhdessä

    Vaihtoehdot ovat käytännöllisesti katsoen loputtomia, ja ne kaikki toimivat tämän vanilja-JavaScript-laajennuksen kautta.

    Mobiilikäyttäjät suosivat usein alkuperäistä päivämääränvalitsinta, mutta voit ohittaa tämän mobiiliasetuksella JavaScriptissä. Tällä tavoin sinulla on sama käyttöliittymä kaikissa laitteissa.

    Ja voit jopa lisää IE9-tuki polyfillillä joka tekee tästä yhden parhaiten tuetuista päivämäärävalitsimista.

    Asennus on helppoa komentoja npm, Bower ja Yarn. Voit myös ladata lähdetiedostot suoraan GitHubista jos haluat reitin.

    Kaikki mitä sinun tarvitsee tietää löytyy asennus-sivulta, joka näyttää sinulle miten lisätä tiedostot otsikkoon & miten soittaa tähän päivämääränvalitsimeen missä tahansa kentässä. Helposti yksi parhaista päivämääränvalitsimista, jotka on suunniteltu vain tarpeeksi sovitettaviksi mihin tahansa suunnitteluun.