{"id":14990221,"url":"https://github.com/matsuuu/lit-flatpickr","last_synced_at":"2025-10-10T17:39:24.383Z","repository":{"id":40649750,"uuid":"266971373","full_name":"Matsuuu/lit-flatpickr","owner":"Matsuuu","description":"A Lit Element port of the popular datepicker Flatpickr","archived":false,"fork":false,"pushed_at":"2025-03-25T12:09:47.000Z","size":952,"stargazers_count":29,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T07:06:05.238Z","etag":null,"topics":["typescript","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matsuuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-26T07:15:06.000Z","updated_at":"2025-03-25T12:09:51.000Z","dependencies_parsed_at":"2023-01-24T18:05:01.765Z","dependency_job_id":null,"html_url":"https://github.com/Matsuuu/lit-flatpickr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Flit-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Flit-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Flit-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Flit-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matsuuu","download_url":"https://codeload.github.com/Matsuuu/lit-flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994121,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["typescript","webcomponent"],"created_at":"2024-09-24T14:19:43.901Z","updated_at":"2025-10-10T17:39:19.330Z","avatar_url":"https://github.com/Matsuuu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lit-flatpickr\n\n[![npm version](https://badge.fury.io/js/lit-flatpickr.svg)](https://badge.fury.io/js/lit-flatpickr)\n\n[Flatpickr](https://github.com/flatpickr/flatpickr) for Lit Element\n\n## Installation\n\nLit-Flatpickr can be installed through npm\n\n```bash\nnpm install lit-flatpickr\n```\n\n## Usage\n\nIt is highly recommended that you use lit-flatpickr as a wrapper for your own custom input elements, to provide the\nbest User experience for the users.\n\n```js\nimport 'lit-flatpickr';\nimport { html, LitElement } from 'lit';\n\nclass MyApp extends LitElement {\n getValue() {\n this.shadowRoot.querySelector('#my-date-picker').getValue();\n }\n\n render() {\n return html`\n \u003clit-flatpickr\n id=\"my-date-picker\"\n altInput\n altFormat=\"F j, Y\"\n dateFormat=\"Y-m-d\"\n theme=\"material_orange\"\n minDate=\"2020-01\"\n maxDate=\"2020-12-31\"\n \u003e\u003c/lit-flatpickr\u003e\n `;\n }\n}\n```\n\n#### Styling the input component\n\n```js\nhtml`\n \u003cstyle\u003e\n lit-flatpickr {\n cursor: pointer;\n font-size: 38px;\n }\n \u003c/style\u003e\n \u003clit-flatpickr id=\"my-date-picker\" altInput altFormat=\"F j, Y\" dateFormat=\"Y-m-d\" theme=\"material_orange\" minDate=\"2020-01\" maxDate=\"2020-12-31\"\u003e\u003c/lit-flatpickr\u003e `;\n`\n```\n\n#### Using your own custom input Web Component\n\n```js\n// Web Component\nhtml`\n \u003clit-flatpickr\u003e\n \u003cmy-custom-input\u003e\u003c/my-custom-input\u003e\n \u003c/lit-flatpickr\u003e\n`;\n\n// HTML\nhtml`\n \u003clit-flatpickr\u003e\n \u003cdiv\u003e\n \u003cinput /\u003e\n \u003c/div\u003e\n \u003c/lit-flatpickr\u003e\n`;\n```\n\n#### Define your own CDN source\n\n```javascript\nimport { setCDNBase } from 'lit-flatpickr/src/CdnManager.js';\n\nsetCDNBase('https://unpkg.com/flatpickr@4.6.13/dist/');\n```\n\n## Properties\n\n| Property | Attribute | Type | Default | Description |\n| ----------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `allowInput` | `allowInput` | `boolean` | false | Allows the user to enter a date directly input the input field. By default, direct entry is disabled. |\n| `altFormat` | `altFormat` | `string` | \"F j, Y\" | Exactly the same as date format, but for the altInput field |\n| `altInput` | `altInput` | `boolean` | false | Show the user a readable date (as per altFormat), but return something totally different to the server. |\n| `altInputClass` | `altInputClass` | `string` | \"\" | This class will be added to the input element created by the altInput option.\u003cbr /\u003eNote that altInput already inherits classes from the original input. |\n| `ariaDateFormat` | `ariaDateFormat` | `string` | \"F j, Y\" | Defines how the date will be formatted in the aria-label for calendar days, using the same tokens as dateFormat.\u003cbr /\u003eIf you change this, you should choose a value that will make sense if a screen reader reads it out loud |\n| `clickOpens` | `clickOpens` | `boolean` | true | Whether clicking on the input should open the picker.\u003cbr /\u003eYou could disable this if you wish to open the calendar manually with.open() |\n| `dateFormat` | `dateFormat` | `string` | \"Y-m-d\" | A string of characters which are used to define how the date will be displayed in the input box. |\n| `defaultDate` | `defaultDate` | `DateOption \\| DateOption[]` | | Sets the initial selected date(s).\u003cbr /\u003e\u003cbr /\u003eIf you're using mode: \"multiple\" or a range calendar supply an Array of\u003cbr /\u003eDate objects or an Array of date strings which follow your dateFormat.\u003cbr /\u003e\u003cbr /\u003eOtherwise, you can supply a single Date object or a date string. |\n| `defaultHour` | `defaultHour` | `number` | 12 | Initial value of the hour element. |\n| `defaultMinute` | `defaultMinute` | `number` | 0 | Initial value of the minute element. |\n| `disable` | `disable` | `DateLimit\u003cDateOption\u003e[]` | [] | Dates selected to be unavailable for selection. |\n| `disableMobile` | `disableMobile` | `boolean` | false | Set disableMobile to true to always use the non-native picker.\u003cbr /\u003eBy default, flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used. |\n| `enable` | `enable` | `DateLimit\u003cDateOption\u003e[]` | [] | Dates selected to be available for selection. |\n| `enableSeconds` | `enableSeconds` | `boolean` | false | Enables seconds in the time picker |\n| `enableTime` | `enableTime` | `boolean` | false | Enables time picker |\n| `formatDateFn` | `formatDateFn` | `((date: Date, format: string, locale: Locale) =\u003e string) \\| undefined` | | Allows using a custom date formatting function instead of the built-in\u003cbr /\u003ehandling for date formats using dateFormat, altFormat, etc.\u003cbr /\u003e\u003cbr /\u003eFunction format: (date: Date, format: string, locale: Locale) =\u003e string |\n| `hourIncrement` | `hourIncrement` | `number` | 1 | Adjusts the step for the hour input (incl. scrolling) |\n| `inline` | `inline` | `boolean` | false | Displays the calendar inline |\n| `maxDate` | `maxDate` | `string \\| number \\| Date \\| undefined` | | The maximum date that a user can pick to (inclusive). |\n| `minDate` | `minDate` | `string \\| number \\| Date \\| undefined` | | The minimum date that a user can pick to (inclusive). |\n| `minuteIncrement` | `minuteIncrement` | `number` | 5 | Adjusts the step for the minute input (incl. scrolling) |\n| `mode` | `mode` | `\"single\" \\| \"multiple\" \\| \"range\"` | \"single\" | \"single\", \"multiple\", or \"range\" |\n| `nextArrow` | `nextArrow` | `string` | \"\u003e\" | HTML for the arrow icon, used to switch months. |\n| `noCalendar` | `noCalendar` | `boolean` | false | Hides the day selection in calendar.\u003cbr /\u003eUse it along with enableTime to create a time picker. |\n| `onChange` | `onChange` | `Hook \\| undefined` | | Function(s) to trigger on every date selection |\n| `onClose` | `onClose` | `Hook \\| undefined` | | Function(s) to trigger every time the calendar is closed |\n| `onMonthChange` | `onMonthChange` | `Hook \\| undefined` | | Function(s) to trigger every time the calendar month is changed by the user or programmatically |\n| `onOpen` | `onOpen` | `Hook \\| undefined` | | Function(s) to trigger every time the calendar is opened |\n| `onReady` | `onReady` | `Hook \\| undefined` | | Function(s) to trigger when the calendar is ready |\n| `onValueUpdate` | `onValueUpdate` | `Hook \\| undefined` | | Function(s) to trigger when the input value is updated with a new date string |\n| `onYearChange` | `onYearChange` | `Hook \\| undefined` | | Function(s) to trigger every time the calendar year is changed by the user or programmatically |\n| `parseDateFn` | `parseDateFn` | `((date: string, format: string) =\u003e Date) \\| undefined` | | Function that expects a date string and must return a Date object.\u003cbr /\u003e\u003cbr /\u003eFunction format: (date: string, format: string) =\u003e string |\n| `position` | `position` | `\"auto\" \\| \"above\" \\| \"below\"` | \"auto\" | Where the calendar is rendered relative to the input |\n| `prevArrow` | `prevArrow` | `string` | \"\u003c\" | HTML for the arrow icon, used to switch months. |\n| `shorthandCurrentMonth` | `shorthandCurrentMonth` | `boolean` | false | Show the month using the shorthand version (ie, Sep instead of September) |\n| `showMonths` | `showMonths` | `number` | 1 | The number of months showed |\n| `static` | `static` | `boolean` | false | Position the calendar inside the wrapper and next to the input element |\n| `theme` | `theme` | `\"light\" \\| \"dark\" \\| \"material_blue\" \\| \"material_red\" \\| \"material_green\" \\| \"material_orange\" \\| \"airbnb\" \\| \"confetti\" \\| \"none\"` | \"light\" | The set theme of flatpickr. Use \"none\" if you would like to provide custom theme on your own. |\n| `time_24hr` | `time_24hr` | `boolean` | false | Displays the time picker in 24 hour mode without AM/PM selection when enabled |\n| `weekNumbers` | `weekNumbers` | `boolean` | false | Enabled display of week numbers in calendar |\n| `wrap` | `wrap` | `boolean` | false | flatpickr can parse an input group of textboxes and buttons, common in Bootstrap and other frameworks.\u003cbr /\u003eThis permits additional markup, as well as custom elements to trigger the state of the calendar. |\n\n## Methods\n\n| Method | Type |\n| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `changeMonth` | `(monthNum: number, isOffset?: boolean): void` |\n| `clear` | `(): void` |\n| `close` | `(): void` |\n| `destroy` | `(): void` |\n| `formatDate` | `(dateObj: Date, formatStr: string): string` |\n| `getValue` | `(): string` |\n| `getConfig` | `(): ParsedOptions` |\n| `getCurrentMonth` | `(): number` |\n| `getCurrentYear` | `(): number` |\n| `getOptions` | `(): Partial\u003cBaseOptions\u003e` |\n| `getSelectedDates` | `(): Date[]` |\n| `init` | `(): Promise\u003cvoid\u003e` |\n| `initializeComponent` | `(): void` |\n| `jumpToDate` | `(date: Date, triggerChange: boolean): void` |\n| `open` | `(): void` |\n| `parseDate` | `(dateStr: string, dateFormat: string): Date \\| undefined` |\n| `redraw` | `(): void` |\n| `set` | `(option: \"allowInput\" \\| \"altFormat\" \\| \"altInput\" \\| \"altInputClass\" \\| \"animate\" \\| \"appendTo\" \\| \"ariaDateFormat\" \\| \"clickOpens\" \\| \"closeOnSelect\" \\| \"conjunction\" \\| \"dateFormat\" \\| \"defaultDate\" \\| ... 48 more ... \\| { ...; }, value?: any): void` |\n| `setDate` | `(date: string \\| number \\| Date \\| DateOption[], triggerChange: boolean, dateStrFormat: string): void` |\n| `toggle` | `(): void` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Flit-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatsuuu%2Flit-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Flit-flatpickr/lists"}