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