🗓️ flatpickr-id-plugin

A lightweight flatpickr plugin for transferring ID and accessibility attributes

Features • Installation • Usage • API • Demo

📋 Overview

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.

✨ Features

• 🎯 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

📦 Installation

npm

npm install flatpickr-id-plugin

yarn

yarn add flatpickr-id-plugin

pnpm

pnpm add flatpickr-id-plugin

CDN

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

🚀 Usage

Basic Usage

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"
/>

With Custom Configuration

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

TypeScript

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

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

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

Vue.js

<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>

React

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"
    />
  );
}

📖 API

idPlugin(config?: IdPluginConfig)

Creates a new instance of the plugin.

Configuration Options

| Option | Type | Default | Description | | ------------ | ---------- | -------------------------------------------------- | ---------------------------------------------------- | | delay | number | 10 | Delay in milliseconds before transferring attributes | | attributes | string[] | ['id', 'title', 'aria-label', 'aria-labelledby'] | List of attributes to transfer | | debug | boolean | false | Enable console logging for debugging |

Transferred Attributes

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

🎨 Demo

Run the hosted demo at https://bearholmes.github.io/flatpickr-id-plugin/examples/demo.html or open examples/demo.html locally to see the plugin in action:

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

🛠️ Development

Setup

npm install

Build

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

Testing

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

Type Checking

npm run typecheck

Formatting

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

🤝 Contributing

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

📝 License

MIT © bearholmes

🔗 Links

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

🙏 Acknowledgments

Inspired by flatpickr's labelPlugin with enhancements including:

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

Made with ❤️ by bearholmes

If this plugin helped you, please ⭐ star the repository!