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
  });
},
...

new Litepicker({
  element: document.getElementById('datepicker'),
  plugins: ['mobilefriendly']
})