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,
},
})
- Click on first input.
- Press
Tab
key.
Code:
new Litepicker({
element: document.getElementById('datepicker'),
plugins: ['keyboardnav']
})