Meet Vuelendar: Datepicker kalender kirjutatud VueJS

Kuna kohandamine muutus üha keerulisemaks ja aeganõudvamaks, otsustasime otsida teise lahenduse. Veelgi enam, API-d ei võimaldanud meil rakendada paljusid nõudeid, mis olid lõppkvaliteedi jaoks üsna olulised toode. Seepärast ongi Vuelendar tehti.

Allikas on leitav kood kohta Vuelendar meie GitHubi repositoorium.

Mis see täpselt on?

Nagu selle artikli alguses juba arvata võisite, on a Vuelendar on VueJ-s kirjutatud kalendrikomponent. See võimaldab valida kuupäevade vahemiku või ühe kuupäeva. Veelgi enam, te saate hõlpsasti asendada ka mitteaktiivseid päevi! Samuti võimaldab see teil lisada kohandatud CSS-palasid, mis võivad lõppkokkuvõttes muuta "välimuse ja tunnetuse" kogemust.

Loomeprotsess

Varem kasutasime ühes meie projektis kalendrifunktsiooni rakendamiseks jQquery'd ja oleme komistanud probleemi - seda oli raske kohandada. See on siis, kui me oleme teinud otsuse teha oma komponent. Esimeses etapis kasutasime seda peamiselt oma projektides, kuid aja möödudes jõudsime järeldusele, et see võib olla mugav lahendus teistele programmeerijatele - see on siis, kui me jagasime seda The Codest GitHubi kontol koodiraamatukogu kujul.

Paigaldamine

npm install [email protected]

Kasutamine

Impordi stiilid oma .vue faili:

Registri komponendid:

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Kasutage malli:

Kuupäevade keelamine

Vuelendar võimaldab kaks võimalust kuupäevade keelamiseks.

Kasutades massiivi:

Deaktiveerib 21. aprilli 2019 ja 25. aprilli 2019.

Objekti kasutamine kuupäevade vahemiku kirjeldamiseks:

Lülitab välja kõik kuupäevad alates 21. aprillist 2019 ja 25. aprillist 2019

Kui määrata ainult atribuut "alates", keelatakse kõik kuupäevad, mis on möödunud sellest kuupäevast.

Keelab kõik kuupäevad alates 21. aprillist 2019

Kui määrata ainult atribuut "kuni", keelatakse kõik enne seda kuupäeva olevad kuupäevad.

Deaktiveerib kõik kuupäevad enne 21. aprilli 2019

Taotlus

Meie Vuelendar saab kasutada kõikides projektides, mis põhinevad VueJSil. See on lihtne, kuid tõhus komponent, mis mitte ainult ei säästa teie kui programmeerija aega, vaid rikastab ka teie projekt sujuvalt toimiva kalendriga. Tänapäeval on palju projekte, mis võivad vajada seda lahendust, nii et siin me oleme!

Ajakohastamine

Kui VueJSi uus värskendus käivitati, ilmusid uued nõuded. Seetõttu otsustasime kohandada meie kalendrikomponendi VueJS-i uusima versiooniga. Raamatukogusid tuli täiustada, et meie väike, kuid käepärane pärl töötaks sujuvalt ja tõhusalt.

Kokkuvõtteks

Kui olete keset VueJS-il põhinevat projekti ja otsite kalendri lahedat funktsiooni, siis see on kindlasti teie jaoks! Me kõik teame, kui palju aega võib nende komponentide loomine võtta. Meie Vuelandar aitab teil oma taotlust vürtsitada ning säästa aega ja närve!

Loe edasi:

Miks peaksite (tõenäoliselt) kasutama Typescript'i

Kuidas mitte tappa projekti halbade kodeerimistavadega?

NextJS-i andmete hankimise strateegiad