Vuelendar är en liten datepicker-kalender skriven i VueJS. Under ganska lång tid använde vi vue wrapper för pikaday i vårt projekt. Tyvärr var det svårt att anpassa, och dess API tillät oss inte att implementera ganska många krav.
Källa kod ouf vuelendar du kan hitta i vårt github-arkiv.
Kort introduktion
Vi behövde göra en hel del hacks. Vid ett tillfälle bestämde vi oss för att det skulle vara enklare att skapa egna Vue.js-baserad kalender från grunden än att anpassa den befintliga.
Vuelendar gör det möjligt för användare att välja ett datumintervall:
eller välj ett enskilt datum:
Hur använder man den?
Om du vill börja använda vuelendar räcker det med att installera det:
npm installera vuelendar@1.0.0
importera stilar i din .vue-fil:
<style src="vuelendar/scss/vuelendar.scss"></style>
registrera lämpliga komponenter i din VueJS projekt:
import VRangeSelector från 'vuelendar/components/vl-range-selector';
import VDaySelector från 'vuelendar/components/vl-day-selector';
export default {
komponenter: {
VRangeSelector,
VDayVäljare
},
data () {
return {
intervall: {},
datum: null
}
}
// ...
}
och använda i en mall:
Du kan också kolla upp arkivet med demo.
Läs också:
