Flatpickr Autocomplete Plugin

Control autocomplete behavior on your date picker inputs

Autocomplete Disabled autocomplete="off"

This date picker has autocomplete disabled. The plugin automatically transfers the autocomplete="off" attribute to the visible input field.

Select a date (autocomplete off)

<input
  id="datepicker1"
  autocomplete="off"
>

<script>
flatpickr('#datepicker1', {
  plugins: [new autocompletePlugin()]
});
</script>

Accessibility Enhanced aria-autocomplete="none"

This example demonstrates the plugin's support for accessibility attributes. Both autocomplete and aria-autocomplete are properly transferred.

Select a date (with ARIA)

<input
  id="datepicker2"
  autocomplete="off"
  aria-autocomplete="none"
>

<script>
flatpickr('#datepicker2', {
  plugins: [new autocompletePlugin()]
});
</script>

Alternative Input Mode altInput enabled

When using flatpickr's altInput option, the plugin intelligently transfers autocomplete attributes to the alternative input field.

Select a date (alternative input)

<input
  id="datepicker3"
  autocomplete="off"
>

<script>
flatpickr('#datepicker3', {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
  plugins: [new autocompletePlugin()]
});
</script>

Date Range Picker mode="range"

The plugin works seamlessly with flatpickr's range mode and other advanced features.

Select date range

<input
  id="datepicker4"
  autocomplete="off"
>

<script>
flatpickr('#datepicker4', {
  mode: "range",
  dateFormat: "Y-m-d",
  plugins: [new autocompletePlugin()]
});
</script>

💡 Why use this plugin?

Browser autocomplete can interfere with date pickers, showing irrelevant suggestions. This plugin ensures your autocomplete settings are applied to the actual visible input field, not just the hidden one, giving you full control over the user experience.