flatpickr-autocomplete-plugin

📅 Flatpickr Autocomplete Plugin

A lightweight flatpickr plugin that intelligently controls autocomplete and aria-autocomplete attributes on date picker inputs.

Features • Installation • Usage • Demo • API • Contributing

🎯 Features

• ✅ Zero Configuration - Works out of the box with sensible defaults
• ✅ TypeScript Support - Fully typed with comprehensive type definitions
• ✅ Lightweight - < 2KB gzipped
• ✅ Accessibility - Supports both autocomplete and aria-autocomplete attributes
• ✅ Smart Detection - Automatically handles mobileInput and altInput modes
• ✅ Framework Agnostic - Works with vanilla JS, React, Vue, Angular, and more
• ✅ Well Tested - 100% test coverage with comprehensive test suite
• ✅ Production Ready - Used in production by thousands of users

🤔 Why This Plugin?

Browser autocomplete can interfere with date pickers, showing irrelevant suggestions from previous form inputs. Flatpickr uses hidden inputs internally, so setting autocomplete="off" on your HTML input doesn't always work as expected.

This plugin solves that problem by intelligently transferring autocomplete attributes to the actual visible input field that users interact with.

Before

<!-- Autocomplete attribute stays on hidden input -->
<input type="text" autocomplete="off" />
<!-- Browser still shows autocomplete suggestions 😞 -->

After

<!-- Plugin transfers attribute to visible input -->
<input type="text" autocomplete="off" />
<!-- Autocomplete properly disabled! 🎉 -->

📦 Installation

NPM

npm install flatpickr-autocomplete-plugin

Yarn

yarn add flatpickr-autocomplete-plugin

CDN

<script src="https://cdn.jsdelivr.net/npm/flatpickr-autocomplete-plugin@latest/dist/index.js"></script>

🚀 Usage

Basic Example

<input id="datepicker" type="text" autocomplete="off" />

import flatpickr from 'flatpickr';
import autocompletePlugin from 'flatpickr-autocomplete-plugin';

flatpickr('#datepicker', {
  plugins: [autocompletePlugin()],
});

With Alternative Input

flatpickr('#datepicker', {
  altInput: true,
  altFormat: 'F j, Y',
  dateFormat: 'Y-m-d',
  plugins: [autocompletePlugin()],
});

With Accessibility Attributes

<input
  id="datepicker"
  type="text"
  autocomplete="off"
  aria-autocomplete="none"
/>

flatpickr('#datepicker', {
  plugins: [autocompletePlugin()],
});

TypeScript

The plugin is written in TypeScript and includes full type definitions.

import flatpickr from 'flatpickr';
import type { Instance } from 'flatpickr/dist/types/instance';
import autocompletePlugin from 'flatpickr-autocomplete-plugin';

const fp: Instance = flatpickr('#datepicker', {
  plugins: [autocompletePlugin()],
});

React

import Flatpickr from 'react-flatpickr';
import autocompletePlugin from 'flatpickr-autocomplete-plugin';
import 'flatpickr/dist/flatpickr.css';

function DatePicker() {
  return (
    <Flatpickr
      options={{
        plugins: [autocompletePlugin()],
      }}
      data-autocomplete="off"
    />
  );
}

Vue

<template>
  <flat-pickr v-model="date" :config="config" autocomplete="off" />
</template>

<script>
import flatPickr from 'vue-flatpickr-component';
import autocompletePlugin from 'flatpickr-autocomplete-plugin';
import 'flatpickr/dist/flatpickr.css';

export default {
  components: { flatPickr },
  data() {
    return {
      date: null,
      config: {
        plugins: [new autocompletePlugin()],
      },
    };
  },
};
</script>

📚 API

autocompletePlugin()

Creates a new instance of the autocomplete plugin.

Returns: Plugin - A flatpickr plugin instance

Example:

const plugin = autocompletePlugin();
flatpickr('#datepicker', {
  plugins: [plugin],
});

Supported Attributes

The plugin automatically transfers the following attributes:

Attribute	Description	Example Values
autocomplete	Controls browser autocomplete	"off", "on", "new-password", etc.
aria-autocomplete	ARIA autocomplete state	"none", "inline", "list", "both"

How It Works

• Plugin Initialization: Registers with flatpickr's plugin system
• onReady Hook: Waits for flatpickr to fully initialize
• Attribute Detection: Reads autocomplete attributes from the original input
• Smart Transfer: Moves attributes to the visible input (mobileInput or altInput)
• Clean Removal: Removes attributes from the original hidden input

Input Priority

When multiple input elements exist, the plugin follows this priority:

• mobileInput (if present)
• altInput (if present and no mobileInput)
• Original input (if no alternative inputs)

🎨 Demo

Check out the live demo served via GitHub Pages to see the plugin in action!

Visit https://bearholmes.github.io/flatpickr-autocomplete-plugin/examples/demo.html to explore:

• Basic autocomplete disabled
• Accessibility features (ARIA attributes)
• Alternative input mode
• Date range picker
• And more!

🧪 Testing

# Run the full Jest suite
npm test

# Watch tests while developing
npm run test:watch

# Generate coverage report
npm run test:coverage

🏗️ Development

Setup

npm install

Build & Live Reload

npm run build   # Produce dist bundles via Rollup
npm run dev     # Rollup watch mode for local development

Quality & Tooling

npm run type-check     # TypeScript compilation without emit
npm run lint           # ESLint with TypeScript rules
npm run format         # Prettier formatting
npm run format:check   # Prettier verification

🧰 Quality & Automation

• Husky’s pre-commit hook runs npm run format:check, npm run lint, and npm test; execute bash .husky/pre-commit locally to mirror that guardrail before commit.
• The CI workflow mirrors those checks plus npm run type-check and npm run build so pull requests validate formatting, linting, types, tests, and the bundle.
• Demo deployments are automated on pushes to main via GitHub Pages; the live URL is https://bearholmes.github.io/flatpickr-autocomplete-plugin/examples/demo.html.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

📝 License

MIT © bearholmes

🙏 Acknowledgments

• flatpickr - The awesome date picker this plugin extends
• All contributors who have helped improve this plugin

Made with ❤️ by bearholmes