{"id":13723548,"url":"https://github.com/jacobmischka/svelte-flatpickr","last_synced_at":"2025-08-31T20:42:30.007Z","repository":{"id":41344693,"uuid":"103172419","full_name":"jacobmischka/svelte-flatpickr","owner":"jacobmischka","description":"Flatpickr component for Svelte.","archived":false,"fork":false,"pushed_at":"2024-12-02T02:03:45.000Z","size":272,"stargazers_count":164,"open_issues_count":15,"forks_count":26,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T05:09:27.077Z","etag":null,"topics":["flatpickr","hacktoberfest","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-flatpickr","language":"Svelte","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/jacobmischka.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-11T18:24:23.000Z","updated_at":"2025-02-07T02:16:42.000Z","dependencies_parsed_at":"2023-11-28T16:47:56.369Z","dependency_job_id":"1c4799a4-14ec-426a-b913-937a7404621c","html_url":"https://github.com/jacobmischka/svelte-flatpickr","commit_stats":{"total_commits":88,"total_committers":6,"mean_commits":"14.666666666666666","dds":"0.15909090909090906","last_synced_commit":"2b52db66542d2eb345fc5047cffcc0e4ff280b67"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fsvelte-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fsvelte-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fsvelte-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fsvelte-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacobmischka","download_url":"https://codeload.github.com/jacobmischka/svelte-flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489226,"owners_count":21112531,"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":["flatpickr","hacktoberfest","svelte"],"created_at":"2024-08-03T01:01:42.764Z","updated_at":"2025-04-11T22:29:19.988Z","avatar_url":"https://github.com/jacobmischka.png","language":"Svelte","funding_links":[],"categories":["components and libraries"],"sub_categories":["time and date"],"readme":"# svelte-flatpickr\n\nSvelte component for [flatpickr](https://flatpickr.js.org/) datetime picker.\n\n## Usage\n\nIdeally, if you're using svelte already, configure your bundler to resolve the\npackage's `svelte` field (or import from `svelte-flatpickr/src/Flatpickr.svelte`) and compile the template from within your own project. See [sveltejs/svelte#604](https://github.com/sveltejs/svelte/issues/604) for more information.\n\nDon't forget to import flatpickr's stylesheets as well\n(`flatpickr/dist/flatpickr.css`, and optionally any theme stylesheets you want).\n\n## Versions\n\n-   For Svelte v3 use v3.x.x\n-   For Svelte v2.x use v1.x.x\n-   For Svelte v1.x use v0.x.x\n\n## Flatpickr documentation\n\n-   [Examples](https://flatpickr.js.org/examples/)\n-   [Events and hooks](https://flatpickr.js.org/events/)\n-   [Configuration options](https://flatpickr.js.org/options/)\n\n### Example\n\nSee the `test` directory for a full working example.\n\n```svelte\n\u003cmain\u003e\n    \u003cform on:submit={handleSubmit}\u003e\n        \u003cFlatpickr {options} bind:value bind:formattedValue on:change={handleChange} name=\"date\" /\u003e\n\n        \u003cbutton type=\"submit\"\u003e\n            Submit\n        \u003c/button\u003e\n    \u003c/form\u003e\n\u003c/main\u003e\n\n\u003cscript\u003e\n    import Flatpickr from 'svelte-flatpickr';\n    import 'flatpickr/dist/flatpickr.css';\n\n    let value, formattedValue;\n\n    const options = {\n        enableTime: true,\n        onChange(selectedDates, dateStr) {\n            console.log('flatpickr hook', selectedDates, dateStr);\n        }\n    };\n\n    $: console.log({ value, formattedValue });\n\n    function handleChange(event) {\n        const [ selectedDates, dateStr ] = event.detail;\n        console.log({ selectedDates, dateStr });\n    }\n\n    function handleSubmit(event) {\n        event.preventDefault();\n\n        console.log(event.target.elements['date'].value);\n    }\n\u003c/script\u003e\n```\n\nThe selected date(s) can be obtained using hooks or binding to `value`.\n\nThe format of the date expected can be controlled with the prop `dateFormat`, which will take a date format acceptable to Flatpickr.\n\nThe prop `formattedValue` can also be bound to, which contains the selected\ndate(s)'s formatted string.\n\nThe props `input` and `flatpickr` (or `fp`) can also be bound to, which represent the underlying input element (unless using a custom external element as described below) and the [flatpickr instance](https://flatpickr.js.org/instance-methods-properties-elements/), respectively.\nAssigning to these will break the Flatpickr component, please don't.\n\n### Hooks\n\nHooks can be specified normally in the options object, or by listening to the svelte event.\n\nWhen binding svelte handler, `event.details` will be `[ selectedDates, dateStr, instance ]` (see [flatpickr events docs](https://chmln.github.io/flatpickr/events/)).\n\n### External Elements\n\nAs per the [flatpickr documentation](https://flatpickr.js.org/examples/#flatpickr-external-elements), it is also possible to wrap a custom element rather than have the component create the input for you. This allows for decoration of the control such as adding a clear button or similar.\n\nYou can add the custom element by wrapping it in the Flatpickr component, as it is the default slot. However, it is necessary to pass the selector for the custom element, as the `element` attribute to Flatpickr's options.\n\nSpecifying the selector for a custom element automatically adds the `{wrap: true}` option to flatpickr.\n\n```html\n\u003cFlatpickr\n    options=\"{ flatpickrOptions }\"\n    bind:value=\"{date}\"\n    element=\"#my-picker\"\n\u003e\n    \u003cdiv class=\"flatpickr\" id=\"my-picker\"\u003e\n        \u003cinput type=\"text\" placeholder=\"Select Date..\" data-input /\u003e\n\n        \u003ca class=\"input-button\" title=\"clear\" data-clear\u003e\n            \u003ci class=\"icon-close\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n\u003c/Flatpickr\u003e\n\n\u003cscript\u003e\n    import Flatpickr from 'svelte-flatpickr';\n\n    import 'flatpickr/dist/flatpickr.css';\n    import 'flatpickr/dist/themes/light.css';\n\n    let date = null;\n    const flatpickrOptions = {};\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobmischka%2Fsvelte-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacobmischka%2Fsvelte-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobmischka%2Fsvelte-flatpickr/lists"}