Fable.React.Flatpickr

A complete binding for react-flatpickr that is ready to use within Elmish applications

Installation

Install this library from nuget

paket add Fable.React.Flatpickr --project /path/to/Project.fsproj

Install the actual Flatpickr library from npm

npm install flatpickr react-flatpickr --save

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 :

npm install css-loader style-loader --save-dev

Now from your Webpack, use the loaders:

{
    test: /\.(sa|c)ss$/,
    use: [
        "style-loader",
        "css-loader"
    ]
}

Usage

Live Demo with examples

type State = { SelectedTime : DateTime }

type Msg = UpdateSelectedTime of DateTime 

let init() = { SelectedTime = DateTime.Now }, Cmd.none

let update msg state = 
    match msg with 
    | UpdateSelectedTime time ->
        let nextState = { state with SelectedTime = time }
        nextState, Cmd.none

let render state dispatch = 
    Flatpickr.flatpickr 
        [ Flatpickr.Value state.SelectedTime 
          Flatpickr.OnChange (UpdateSelectedTime >> dispatch)
          Flatpickr.ClassName "input" ]


// Somewhere before you app starts
// you must import the CSS theme

importAll "flatpickr/dist/themes/material_green.css"

// or any of the other themes in the dist directory of flatpickr

Jmaharman/Fable.React.Flatpickr

Fable.React.Flatpickr

Installation

Usage