Keyboard navigation plugin

Adds keyboard navigation.
Supports Tab, Shift+Tab, Arrow keys.

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/keyboardnav.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/keyboardnav';

Now you can create Litepicker instance with plugin:

<script>
const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['keyboardnav']
});
</script>

Options

firstTabIndex ^2.0.5+

Type: Number

Default: 1

First target to focus on.
tabIndex 1 are the header elements (buttons on header).
tabIndex 2 are elements of days.

Example:

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

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