elm-daterange-picker

A date range picker written in Elm (Demo).

Note: this package, previously known as allo-media/elm-daterange-picker, has moved to n1k0/elm-daterange-picker. New versions will be released from there, but starting from 1.0.0.

How is this useful?

Selecting a date range is a common operation for many Web applications. While there are offerings in the Elm ecosystem, we couldn't find any ergonomic equivalent of daterangepicker, which this package takes a lot of inspiration from.

Demo

You can look at how this package can be used by browsing this demo code here.

Usage

import Browser
import DateRangePicker as Picker
import Html exposing (Html, text)

type alias Model =
    { picker : Picker.State }

type Msg
    = PickerChanged Picker.State

init : () -> ( Model, Cmd Msg )
init _ =
    let
        picker =
            Picker.init Picker.defaultConfig Nothing
    in
    ( { picker = picker }
    , Picker.now PickerChanged picker
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PickerChanged state ->
            ( { model | picker = state }, Cmd.none )

view : Model -> Html Msg
view model =
    Picker.view PickerChanged model.picker

main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = .picker >> Picker.subscriptions PickerChanged
        }

Customize styles

By default, we have not defined any default font-family, so that the style fits any app/site.

You can use the style.css file or its SCSS source as a starting point for fine-tuning the default styles of the datepicker, which also uses CSS variables to help you tweaking most colors used by the component; just add your own root colors after calling our CSS, and it's done:

:root {
  --edrp-background-color: #fff;
  --edrp-font-color: rgba(0, 0, 0, 0.8);
  --edrp-primary-color: rgb(82, 143, 255);
  --edrp-primary-color-alpha: rgba(82, 143, 255, 0.25);
  --edrp-border-color: lightgrey;
}

So if you have questionable tastes, you can eventually obtain this:

Install

elm install n1k0/elm-daterange-picker

Local install

npm install

Run the demo

The demo is powered by parcel, meaning any code changes will trigger a page reload. Neat!

npm start

Then head to localhost:1234 from your browser.

Credits

• BeardedBear for the default styles.
• Allo-Media for initially backing up the package development.

License

MIT