Examples
Table of contents
- Show nights in tooltip
- Allowed days instead of lock days
- Show previous month instead of current month
- Add Litepicker to NuxtJS project
new Litepicker({
element: document.getElementById('datepicker'),
singleMode: false,
tooltipText: {
one: 'night',
other: 'nights'
},
tooltipNumber: (totalDays) => {
return totalDays - 1;
}
})
Allowed days instead of lock days
const allowedDates = [
'2021-02-01', '2021-02-05', '2021-02-08',
'2021-02-12', '2021-02-15', '2021-02-19',
];
new Litepicker({
element: document.getElementById('datepicker'),
singleMode: false,
lockDaysFilter: (date1, date2, pickedDates) => {
return !allowedDates.includes(date1.format('YYYY-MM-DD'));
}
})
Show previous month instead of current month
new Litepicker({
element: document.getElementById('datepicker'),
startDate: new Date(),
setup: (picker) => {
picker.on('show', () => {
let date = picker.getDate();
if (date) {
date.setMonth(date.getMonth() - 1);
picker.gotoDate(date);
}
});
}
})
Add Litepicker to NuxtJS project
- Download Litepicker from CDN:
https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js
- Place in
plugins
folder of your NuxtJS project. - Update
nuxt.config.js
// nuxt.config.js
plugins: [
{ src: '~/plugins/litepicker.js', mode: 'client' }
],
- Initialize Litepicker
// index.vue
export default {
mounted: function () {
new Litepicker({
element: document.getElementById("datepicker"),
});
},
};