A date range picker written in Elm (Demo).
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.
You can look at how this package can be used by browsing this demo code here.
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
}
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:
elm install allo-media/elm-daterange-picker
npm install
The demo is powered by elm-live, meaning any code changes will trigger a page reload. Neat!
npm start
Then head to localhost:3000 from your browser.
If you've configured Atom & Elmjutsu to use ./node_modules/.bin/elm
as the
default path to the Elm executable, you'll need a trick for having the compiler
working when editing demo/Main.elm
:
mkdir -P demo/node_modules/.bin
ln -sf ../../../node_modules/.bin/elm demo/node_modules/.bin/elm
MIT