Mobile friendly plugin
Adds swipes (left/right) to switch months.
Litepicker version 2.0.0 or higher is required.
Installation
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
// include plugin after Litepicker
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/mobilefriendly.js"></script>
If you’re using a bundler, e.g. webpack, you’ll need to import Litepicker first.
import Litepicker from 'litepicker';
import 'litepicker/dist/plugins/mobilefriendly';
Now you can create Litepicker instance with plugin:
<script>
const picker = new Litepicker({
element: document.getElementById('litepicker'),
plugins: ['mobilefriendly']
});
</script>
Options
breakpoint 2.0.11+
Type: Number
Default: 480
Breakpoint for mobile detection.
Example:
new Litepicker({
element: document.getElementById('datepicker'),
plugins: ['mobilefriendly']
mobilefriendly: {
breakpoint: 480,
},
})
Events:
mobilefriendly.before:show
Arguments: (el)
el
is triggered element.
Event is called before show in mobile view.
...
setup: (picker) => {
picker.on('mobilefriendly.before:show', (el) => {
// some action
});
},
...
mobilefriendly.show
Arguments: (el)
el
is triggered element.
Event is called after show in mobile view.
...
setup: (picker) => {
picker.on('mobilefriendly.show', (el) => {
// some action
});
},
...
Test on mobile.
Code:
new Litepicker({
element: document.getElementById('datepicker'),
plugins: ['mobilefriendly']
})