flatpickr-id-plugin is a simple yet powerful plugin for flatpickr that automatically transfers important attributes from your original input element to the flatpickr-generated input. This ensures proper form labels, accessibility features, and unique identifiers work correctly with flatpickr.

Inspired by flatpickr's labelPlugin, this version adds TypeScript support, richer configuration, and more robust attribute handling.

• 🎯 Automatic Attribute Transfer - Transfers id, title, aria-label, and aria-labelledby
• ♿ Accessibility First - Maintains ARIA attributes for screen readers
• 🔧 Highly Configurable - Customize delay, attributes list, and debug mode
• 📱 Mobile Support - Works with both altInput and mobileInput modes
• 💪 TypeScript Support - Full type definitions included
• 🛡️ Error Handling - Comprehensive error handling and optional debug logging
• 📦 Zero Dependencies - Only requires flatpickr as peer dependency
• 🪶 Lightweight - ~2KB minified

npm install flatpickr-id-plugin

yarn add flatpickr-id-plugin

pnpm add flatpickr-id-plugin

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

import flatpickr from 'flatpickr';
import idPlugin from 'flatpickr-id-plugin';

flatpickr('#myDatePicker', {
  plugins: [idPlugin()],
});

<input
  type="text"
  id="myDatePicker"
  title="Select a date"
  aria-label="Date picker"
  placeholder="Click to select date"
/>

flatpickr('#myDatePicker', {
  plugins: [
    idPlugin({
      delay: 20, // Custom delay in ms
      attributes: ['id', 'title', 'data-custom'], // Custom attributes
      debug: true, // Enable debug logging
    }),
  ],
});

import flatpickr from 'flatpickr';
import idPlugin, { IdPluginConfig } from 'flatpickr-id-plugin';

const config: IdPluginConfig = {
  delay: 15,
  debug: true,
};

flatpickr('#myDatePicker', {
  plugins: [idPlugin(config)],
});

<template>
  <input
    ref="datepicker"
    type="text"
    id="vueDatePicker"
    aria-label="Select date"
  />
</template>

<script>
import flatpickr from 'flatpickr';
import idPlugin from 'flatpickr-id-plugin';

export default {
  mounted() {
    flatpickr(this.$refs.datepicker, {
      plugins: [idPlugin()],
    });
  },
};
</script>

import { useEffect, useRef } from 'react';
import flatpickr from 'flatpickr';
import idPlugin from 'flatpickr-id-plugin';

function DatePicker() {
  const inputRef = useRef(null);

  useEffect(() => {
    flatpickr(inputRef.current, {
      plugins: [idPlugin()],
    });
  }, []);

  return (
    <input
      ref={inputRef}
      type="text"
      id="reactDatePicker"
      aria-label="Select date"
      placeholder="Pick a date"
    />
  );
}

Creates a new instance of the plugin.

By default, the following attributes are transferred:

• id - Element identifier for labels and forms
• title - Tooltip text
• aria-label - Accessibility label for screen readers
• aria-labelledby - Reference to label element

Try the deployed demo (pending Actions run) at https://bearholmes.github.io/flatpickr-id-plugin/examples/demo.html, or open examples/demo.html locally after running npm run build to inspect the plugin behavior:

git clone https://github.com/bearholmes/flatpickr-id-plugin.git
cd flatpickr-id-plugin
npm install
npm run build
# Open examples/demo.html in your browser

npm install

npm run build          # Development build
npm run build:prod     # Production build with minification
npm run dev            # Watch mode

npm test               # Run tests
npm run test:watch     # Watch mode
npm run test:coverage  # Coverage report

npm run typecheck

npm run format         # Format all files
npm run format:check   # Check formatting

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

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

MIT © bearholmes

• flatpickr - The amazing date picker library
• Original labelPlugin - Source of inspiration
• GitHub Repository
• npm Package
• Issue Tracker

Inspired by flatpickr's labelPlugin with enhancements including:

• TypeScript support
• Configurable options
• Enhanced error handling
• Comprehensive test coverage
• Better documentation