{"id":16485409,"url":"https://github.com/zaid-ajaj/fable.react.flatpickr","last_synced_at":"2025-03-23T12:33:03.595Z","repository":{"id":87583261,"uuid":"129053105","full_name":"Zaid-Ajaj/Fable.React.Flatpickr","owner":"Zaid-Ajaj","description":"Fable binding for react-flatpickr that is ready to use within Elmish applications ","archived":false,"fork":false,"pushed_at":"2019-04-21T12:52:49.000Z","size":2698,"stargazers_count":14,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T20:22:36.292Z","etag":null,"topics":["fable","flatpak","react"],"latest_commit_sha":null,"homepage":"https://zaid-ajaj.github.io/Fable.React.Flatpickr/","language":"F#","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/Zaid-Ajaj.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}},"created_at":"2018-04-11T07:30:01.000Z","updated_at":"2022-05-02T08:32:08.000Z","dependencies_parsed_at":"2024-01-30T07:09:58.634Z","dependency_job_id":null,"html_url":"https://github.com/Zaid-Ajaj/Fable.React.Flatpickr","commit_stats":null,"previous_names":["zaid-ajaj/elmish-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2FFable.React.Flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2FFable.React.Flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2FFable.React.Flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2FFable.React.Flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zaid-Ajaj","download_url":"https://codeload.github.com/Zaid-Ajaj/Fable.React.Flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104453,"owners_count":20561377,"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":["fable","flatpak","react"],"created_at":"2024-10-11T13:25:49.245Z","updated_at":"2025-03-23T12:33:03.251Z","avatar_url":"https://github.com/Zaid-Ajaj.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fable.React.Flatpickr [![Build Status](https://travis-ci.org/Zaid-Ajaj/Fable.React.Flatpickr.svg?branch=master)](https://travis-ci.org/Zaid-Ajaj/Fable.React.Flatpickr) [![Build status](https://ci.appveyor.com/api/projects/status/9ihe9vmw3k37u72r?svg=true)](https://ci.appveyor.com/project/Zaid-Ajaj/fable-react-flatpickr) [![Nuget](https://img.shields.io/nuget/v/Fable.React.Flatpickr.svg?maxAge=0\u0026colorB=brightgreen)](https://www.nuget.org/packages/Fable.React.Flatpickr)\n\n\nA complete binding for [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) that is ready to use within [Elmish](https://github.com/fable-elmish/elmish) applications\n\n## Installation\n- Install this library from nuget\n```\npaket add Fable.React.Flatpickr --project /path/to/Project.fsproj\n```\n- Install the actual Flatpickr library from npm\n```\nnpm install flatpickr react-flatpickr --save\n```\n- You will also need css module loaders for Webpack because we are going to import the styles directly from npm `css-loader` and `style-loader`, install them :\n```\nnpm install css-loader style-loader --save-dev\n```\n- Now from your Webpack, use the loaders:\n```\n{\n    test: /\\.(sa|c)ss$/,\n    use: [\n        \"style-loader\",\n        \"css-loader\"\n    ]\n}\n```\n\n## Usage \n\n[Live Demo with examples](https://zaid-ajaj.github.io/Fable.React.Flatpickr/)\n\n```fs\ntype State = { SelectedTime : DateTime }\n\ntype Msg = UpdateSelectedTime of DateTime \n\nlet init() = { SelectedTime = DateTime.Now }, Cmd.none\n\nlet update msg state = \n    match msg with \n    | UpdateSelectedTime time -\u003e\n        let nextState = { state with SelectedTime = time }\n        nextState, Cmd.none\n\nlet render state dispatch = \n    Flatpickr.flatpickr \n        [ Flatpickr.Value state.SelectedTime \n          Flatpickr.OnChange (UpdateSelectedTime \u003e\u003e dispatch)\n          Flatpickr.ClassName \"input\" ]\n\n\n// Somewhere before you app starts\n// you must import the CSS theme\n\nimportAll \"flatpickr/dist/themes/material_green.css\"\n\n// or any of the other themes in the dist directory of flatpickr\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaid-ajaj%2Ffable.react.flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaid-ajaj%2Ffable.react.flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaid-ajaj%2Ffable.react.flatpickr/lists"}