Range datepicker

css/elm-range-datepicker.css

@@ -0,0 +1,112 @@
+.elm-datepicker--container {
+  position: relative; }
+
+.elm-datepicker--pickers-container {
+  position: absolute; 
+  border: 1px solid #CCC; 
+  max-width: 420px;
+  outline: 0; }
+
+.elm-datepicker--input {
+  display: block; }
+
+.elm-datepicker--input:focus {
+  outline: 0; }
+
+.elm-datepicker--picker {
+  position: relative;
+  max-width: 190px;
+  display: inline-block;
+  margin: 10px;
+  z-index: 10; 
+  outline: 0;}
+
+.elm-datepicker--picker-header {
+  display: flex;
+  align-items: center; }
+
+.elm-datepicker--prev-container,
+.elm-datepicker--next-container {
+  flex: 0 1 auto; }
+
+.elm-datepicker--month-container {
+  flex: 1 1 auto;
+  padding: 0.5em;
+  display: flex;
+  flex-direction: column; }
+
+.elm-datepicker--month,
+.elm-datepicker--year {
+  flex: 1 1 auto;
+  cursor: default;
+  text-align: center; }
+
+.elm-datepicker--year {
+  font-size: 0.6em;
+  font-weight: 700; }
+
+.elm-datepicker--prev,
+.elm-datepicker--next {
+  border: 6px solid transparent;
+  display: block;
+  width: 0;
+  height: 0;
+  padding: 0 0.2em; }
+
+.elm-datepicker--prev {
+  border-right-color: #AAA; }
+  .elm-datepicker--prev:hover {
+    border-right-color: #BBB; }
+
+.elm-datepicker--next {
+  border-left-color: #AAA; }
+  .elm-datepicker--next:hover {
+    border-left-color: #BBB; }
+
+.elm-datepicker--table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-size: 0.8em; }
+  .elm-datepicker--table td {
+    width: 2em;
+    height: 2em;
+    text-align: center; }
+
+.elm-datepicker--row {
+  border-top: 1px solid #F2F2F2; }
+
+.elm-datepicker--dow {
+  border-bottom: 1px solid #CCC;
+  cursor: default; }
+
+.elm-datepicker--day {
+  cursor: pointer; }
+  .elm-datepicker--day:hover {
+    background: #F2F2F2; }
+
+.elm-datepicker--range {
+  background: #F2F2F2; }
+
+.elm-datepicker--disabled {
+  cursor: default;
+  color: #DDD; }
+  .elm-datepicker--disabled:hover {
+    background: inherit; }
+
+.elm-datepicker--picked {
+  color: white;
+  background: darkblue; }
+  .elm-datepicker--picked:hover {
+    background: darkblue; }
+
+.elm-datepicker--today {
+  font-weight: bold; }
+
+.elm-datepicker--other-month {
+  color: #AAA; 
+  cursor: default;
+  visibility: hidden; }
+  .elm-datepicker--other-month.elm-datepicker--disabled {
+    color: #EEE; }
+  .elm-datepicker--other-month.elm-datepicker--picked {
+    color: white; }

elm-package.json

@@ -8,7 +8,8 @@
         "src"
     ],
     "exposed-modules": [
-        "DatePicker"
+        "DatePicker", 
+        "RangeDatePicker"        
     ],
     "dependencies": {
         "elm-lang/core": "5.0.0 <= v < 6.0.0",

examples/Makefile

@@ -1,4 +1,4 @@
-all: simple-example bootstrap-example range-example simple-nightwatch-example
+all: simple-example bootstrap-example range-example range2-example simple-nightwatch-example
 
 simple-example:
 	cd .. && elm make --warn examples/simple/Simple.elm --output=examples/simple/simple.js
@@ -9,5 +9,8 @@ bootstrap-example:
 range-example:
 	cd .. && elm make --warn examples/range/Range.elm --output=examples/range/range.js
 
+range2-example:
+	cd .. && elm make --warn examples/range2/Range2.elm --output=examples/range2/range2.js
+
 simple-nightwatch-example:
 	cd .. && elm make --warn examples/simple-nightwatch/SimpleNightwatch.elm --output=examples/simple-nightwatch/simple-nightwatch.js

examples/range2/.gitignore

@@ -0,0 +1 @@
+range2.js

examples/range2/Range2.elm

@@ -0,0 +1,93 @@
+module Range2 exposing (main)
+
+import Date exposing (Date, Day(..), day, dayOfWeek, month, year)
+import Html exposing (Html, div, h1, text)
+import RangeDatePicker as DatePicker exposing (DateEvent(..), defaultSettings)
+
+
+type Msg
+    = ToDatePicker DatePicker.Msg
+
+
+type alias Model =
+    { startDate : Maybe Date
+    , finishDate : Maybe Date
+    , datePicker : DatePicker.DatePicker
+    }
+
+
+settings : DatePicker.Settings
+settings =
+    defaultSettings
+
+
+init : ( Model, Cmd Msg )
+init =
+    let
+        ( datePicker, datePickerFx ) =
+            DatePicker.init
+    in
+    { startDate = Nothing
+    , finishDate = Nothing
+    , datePicker = datePicker
+    }
+        ! [ Cmd.map ToDatePicker datePickerFx ]
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg ({ startDate, finishDate, datePicker } as model) =
+    case msg of
+        ToDatePicker msg ->
+            let
+                ( newDatePicker, datePickerFx, dateEvent ) =
+                    DatePicker.update settings msg datePicker
+            in
+            case dateEvent of
+                Changed startDate finishDate ->
+                    { model
+                        | startDate = startDate
+                        , finishDate = finishDate
+                        , datePicker = newDatePicker
+                    }
+                        ! [ Cmd.map ToDatePicker datePickerFx ]
+
+                _ ->
+                    { model
+                        | datePicker = newDatePicker
+                    }
+                        ! [ Cmd.map ToDatePicker datePickerFx ]
+
+
+view : Model -> Html Msg
+view ({ startDate, finishDate, datePicker } as model) =
+    div []
+        [ case startDate of
+            Nothing ->
+                h1 [] [ text "Pick a date" ]
+
+            Just date ->
+                h1 [] [ text <| formatDate date ]
+        , case finishDate of
+            Nothing ->
+                h1 [] [ text "Pick a date" ]
+
+            Just date ->
+                h1 [] [ text <| formatDate date ]
+        , DatePicker.view startDate finishDate settings datePicker
+            |> Html.map ToDatePicker
+        ]
+
+
+formatDate : Date -> String
+formatDate d =
+    toString (month d) ++ " " ++ toString (day d) ++ ", " ++ toString (year d)
+
+
+main : Program Never Model Msg
+main =
+    Html.program
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = always Sub.none
+        }

examples/range2/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <title>elm-datepicker example</title>
+
+    <link rel="stylesheet"
+          type="text/css"
+          href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" />
+
+    <link rel="stylesheet"
+          type="text/css"
+          href="https://fonts.googleapis.com/css?family=Roboto" />
+
+    <link rel="stylesheet"
+          type="text/css"
+          href="css/elm-range-datepicker.css" />
+
+    <style type="text/css">
+      body {
+          font-family: 'Roboto', sans-serif;
+      }
+
+      .container {
+          width: 680px;
+          margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div id="range2">
+      </div>
+    </div>
+
+    <script src="examples/range2/range2.js"></script>
+    <script>
+      Elm.Range2.embed(document.getElementById("range2"));
+    </script>
+  </body>
+</html>