Stimulus Easepick Datepicker

Getting started

Experience the power of simplicity with our lightweight, zero-dependency datepicker powered by easepick. This Stimulus controller wrapper brings you:

• Seamless integration with Stimulus
• Minimal footprint for optimal performance
• Rich functionality without the bloat

Transform date input fields into intuitive, user-friendly datepickers with minimal effort.

Installation

Ensure you have the following dependencies installed in your project:

• @hotwired/stimulus v3 or later
• @easepick/bundle v1.2 or later

Integrate stimulus-easepick into your project:

npm install stimulus-easepick
# yarn add stimulus-easepick

Register the datepicker controller with your Stimulus application:

// app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus";
import Datepicker from "stimulus-easepick";

const application = Application.start();
application.register("datepicker", Datepicker);

Usage

<div data-controller="datepicker" data-datepicker-format-value="D MMM YYYY">
  <input data-datepicker-target="input" />
</div>

Configuration

| Attribute | Default | Type | Description | |---|---|---|---| | data-datepicker-first-day-value | 1 | Number | Day of start week. (0 - Sunday, 1 - Monday, etc…) | | data-datepicker-lang-value | en-US | String | Language. This option affect to day names, month names via Date.prototype.toLocaleString() and also affect to plural rules via Intl.PluralRules. | | data-datepicker-date-value | | String, Number | Unix Timestamp (with milliseconds) or String (must satisfy the option format). | | data-datepicker-format-value | YYYY-MM-DD | String | The default output format. See tokens format. | | data-datepicker-grid-value | 1 | Number | Number of calendar columns. | | data-datepicker-calendars-value | 1 | Number | Number of visible months. | | data-datepicker-readonly-value | false | Boolean | Add readonly attribute to element. | | data-datepicker-inline-value | false | Boolean | Show calendar inline. | | data-datepicker-lock-min-date-value | | String, Number | Lock Plugin. The minimum date that can be selected. Unix Timestamp (with milliseconds) or String (must satisfy the option format). | | data-datepicker-lock-max-date-value | | String, Number | Lock Plugin. The maximum date that can be selected. Unix Timestamp (with milliseconds) or String (must satisfy the option format). | | data-datepicker-enable-time-value | false | Boolean | Enable Time Plugin. | | data-datepicker-time-seconds-value | false | Boolean | Enable seconds picker. | | data-datepicker-time-step-hours-value | 1 | Number | Step for hours. | | data-datepicker-time-step-minutes-value | 5 | Number | Step for minutes. | | data-datepicker-time-step-seconds-value | 5 | Number | Step for seconds. | | data-datepicker-time-twelve-format-value | false | Boolean | Display 12H time. | | data-datepicker-enable-amp-value | false | Boolean | Enable Amp Plugin. | | data-datepicker-amp-reset-button-value | false | Boolean | Adds a reset button to clear the current selection. | | data-datepicker-amp-months-value | false | Boolean | Enable the months dropdown in the calendar. | | data-datepicker-amp-years-value | false | Boolean | Enable the years dropdown in the calendar. | | data-datepicker-amp-min-year-value | 1950 | Number | The minimum year that can be selected in the dropdown. | | data-datepicker-amp-max-year-value | null | Number | The maximum year that can be selected in the dropdown. | | data-datepicker-enable-range-value | false | Boolean | Enable Range Plugin. | | data-datepicker-range-delimiter-value | - | String | Delimiter between dates. | | data-datepicker-range-tooltip-value | true | Boolean | Showing tooltip with how many days will be selected. | | data-datepicker-range-start-date-value | null | String, Number | Preselect start date. Unix Timestamp (with milliseconds) or String (must satisfy the option format). | | data-datepicker-range-end-date-value | null | String, Number | Preselect end date. Unix Timestamp (with milliseconds) or String (must satisfy the option format). | | data-datepicker-enable-preset-value | false | Boolean | Enable Preset Plugin. Range plugin must be enabled. | | data-datepicker-preset-position-value | left | String | Position of preset block (left, right, top, or bottom). |

Contributing

Do not hesitate to contribute to the project by adapting or adding features! Bug reports or pull requests are welcome.

Don't forget to drop a 🌟 on GitHub to support the project.

License

This project is released under the MIT license.