Top 10 Latvia-Based Software Development Companies
Learn about Latvia's top software development companies and their innovative solutions in our latest article. Discover how these tech leaders can help elevate your business.
Vuelendar is a small datepicker calendar written in VueJS. For quite long time we were using vue wrapper for pikaday in our project. Unfortunately it was hard to customize, and it’s API didn’t allowed us to implement quite a lot requirements.
Source code ouf vuelendar you can find in our github repository.
We needed to do a lot of hacks. At one point, we decided that it would be easier to create own Vue.js based calendar from scratch than customize the existing one.
Vuelendar allows users to select either range of dates:
or select a single date:
If you want to start using vuelendar it’s enough to install it:
npm install vuelendar@1.0.0
import styles in your .vue file:
<style src="vuelendar/scss/vuelendar.scss"></style>
register appropriate components in your VueJS project:
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
}
}
// ...
}
and use in a template:
<v-range-selector
:start-date.sync="range.start"
:end-date.sync="range.end"
/>
<v-day-selector
v-model="date"
/>
You can also check out the repository with demo.
Read also: