extract theme and add initial alignment module

elm.json

@@ -7,7 +7,8 @@
     "exposed-modules": [
         "DurationDatePicker",
         "SingleDatePicker",
-        "DatePicker.Settings"
+        "DatePicker.Settings",
+        "DatePicker.Theme"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {

examples/src/DurationDatePickerExample.elm

@@ -124,7 +124,7 @@ view model =
         , div [ style "margin-bottom" "1rem" ]
             [ div [ style "margin-bottom" "1rem" ]
                 [ text "This is a duration picker" ]
-            , div [ style "margin-bottom" "1rem" ]
+            , div [ style "margin-bottom" "1rem", style "position" "relative" ]
                 [ button [ id "my-button", onClick <| OpenPicker ]
                     [ text "Picker" ]
                 , DurationDatePicker.view (userDefinedDatePickerSettings model.zone model.currentTime) model.picker

examples/src/ModalPickerExample.elm

@@ -1,7 +1,7 @@
 module ModalPickerExample exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser.Events
-import DatePicker.Settings exposing (Settings, TimePickerVisibility(..), defaultSettings, defaultTimePickerSettings)
+import DatePicker.Settings as Settings exposing (Settings, TimePickerVisibility(..), defaultSettings, defaultTimePickerSettings)
 import Html exposing (Html, button, div, h1, text)
 import Html.Attributes exposing (class, id, style)
 import Html.Events exposing (onClick)
@@ -42,7 +42,7 @@ update msg model =
         OpenPicker ->
             let
                 ( newPicker, cmd ) =
-                    SingleDatePicker.openPickerOutsideHierarchy "my-button" pickerSettings model.currentTime model.pickedTime model.picker
+                    SingleDatePicker.openPicker "my-button" pickerSettings model.currentTime model.pickedTime model.picker
             in
             ( { model | picker = newPicker }, cmd )
 
@@ -60,10 +60,14 @@ update msg model =
             ( { model | currentTime = newTime }, Cmd.none )
 
         OnViewportChange ->
-            ( model, SingleDatePicker.updatePickerPosition model.picker )
+            let
+                ( newPicker, cmd ) =
+                    SingleDatePicker.updatePickerPosition model.picker
+            in
+            ( { model | picker = newPicker }, cmd )
 
         ToggleModal ->
-            ( { model | modalOpen = not model.modalOpen }, SingleDatePicker.updatePickerPosition model.picker )
+            ( { model | modalOpen = not model.modalOpen }, Cmd.none )
 
         NoOp ->
             ( model, Cmd.none )
@@ -86,6 +90,7 @@ userDefinedDatePickerSettings zone today =
                     , allowedTimesOfDay = \clientZone datetime -> adjustAllowedTimesOfDayToClientZone Time.utc clientZone today datetime
                 }
         , showCalendarWeekNumbers = True
+        , presets = [ Settings.PresetDate { title = "Preset", date = today } ]
     }
 
 
@@ -124,8 +129,8 @@ viewModal model =
         , style "height" "100%"
         , style "background-color" "rgba(0,0,0,0.25)"
         , style "display" "flex"
-        , style "justify-content" "center"
-        , style "align-items" "center"
+        , style "justify-content" "flex-end"
+        , style "align-items" "flex-end"
         ]
         [ div
             [ style "position" "absolute"
@@ -137,7 +142,7 @@ viewModal model =
             ]
             []
         , div
-            [ style "width" "600px"
+            [ style "width" "200px"
             , style "height" "auto"
             , style "max-height" "300px"
             , style "background-color" "white"
@@ -147,8 +152,15 @@ viewModal model =
             , Html.Events.on "scroll" (Decode.succeed OnViewportChange)
             ]
             [ div [ style "padding" "3rem" ]
-                [ button [ id "my-button", style "margin-bottom" "1rem", onClick <| OpenPicker ]
-                    [ text "Open Picker" ]
+                -- [ button [ id "my-button", onClick OpenPicker] [ text "Open Picker" ]
+                -- , SingleDatePicker.view
+                --     (userDefinedDatePickerSettings model.zone model.currentTime)
+                --     model.picker
+                [ SingleDatePicker.viewDateInput [ id "my-button", onClick <| OpenPicker ]
+                    (userDefinedDatePickerSettings model.zone model.currentTime)
+                    model.currentTime
+                    model.pickedTime
+                    model.picker
                 , div [ style "margin-bottom" "1rem" ]
                     [ case model.pickedTime of
                         Just date ->
@@ -163,7 +175,6 @@ viewModal model =
                     ]
                 ]
             ]
-        , SingleDatePicker.view (userDefinedDatePickerSettings model.zone model.currentTime) model.picker
         ]
 
 

examples/src/SingleDatePickerExample.elm

@@ -2,7 +2,7 @@ module SingleDatePickerExample exposing (Model, Msg, init, subscriptions, update
 
 import Css
 import DatePicker.DateInput as DateInput
-import DatePicker.Settings
+import DatePicker.Settings as Settings
     exposing
         ( Settings
         , TimePickerVisibility(..)
@@ -20,32 +20,50 @@ import Utilities exposing (adjustAllowedTimesOfDayToClientZone, isDateBeforeToda
 
 
 type Msg
-    = OpenPicker
-    | UpdatePicker SingleDatePicker.Msg
+    = OpenDetachedPicker String
+    | UpdateDateInputPicker SingleDatePicker.Msg
+    | UpdateDetachedPicker SingleDatePicker.Msg
     | AdjustTimeZone Zone
     | Tick Posix
 
 
 type alias Model =
     { currentTime : Posix
     , zone : Zone
-    , pickedTime : Maybe Posix
-    , picker : SingleDatePicker.DatePicker Msg
+    , dateInputPickerTime : Maybe Posix
+    , dateInputPicker : SingleDatePicker.DatePicker Msg
+    , detachedPickerTime : Maybe Posix
+    , detachedPicker : SingleDatePicker.DatePicker Msg
     }
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        OpenPicker ->
-            ( { model | picker = SingleDatePicker.openPicker (userDefinedDatePickerSettings model.zone model.currentTime) model.currentTime model.pickedTime model.picker }, Cmd.none )
+        OpenDetachedPicker elementId ->
+            let
+                ( newPicker, cmd ) =
+                    SingleDatePicker.openPicker elementId
+                        (userDefinedDatePickerSettings model.zone model.currentTime)
+                        model.currentTime
+                        model.detachedPickerTime
+                        model.detachedPicker
+            in
+            ( { model | detachedPicker = newPicker }, cmd )
 
-        UpdatePicker subMsg ->
+        UpdateDetachedPicker subMsg ->
             let
                 ( ( newPicker, maybeNewTime ), cmd ) =
-                    SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.picker
+                    SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.detachedPicker
             in
-            ( { model | picker = newPicker, pickedTime = maybeNewTime }, cmd )
+            ( { model | detachedPicker = newPicker, detachedPickerTime = maybeNewTime }, cmd )
+
+        UpdateDateInputPicker subMsg ->
+            let
+                ( ( newPicker, maybeNewTime ), cmd ) =
+                    SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.dateInputPicker
+            in
+            ( { model | dateInputPicker = newPicker, dateInputPickerTime = maybeNewTime }, cmd )
 
         AdjustTimeZone newZone ->
             ( { model | zone = newZone }, Cmd.none )
@@ -83,7 +101,9 @@ userDefinedDatePickerSettings zone today =
                     , allowedTimesOfDay = \clientZone datetime -> adjustAllowedTimesOfDayToClientZone Time.utc clientZone today datetime
                 }
         , showCalendarWeekNumbers = True
-        , presets = []
+        , presets = [ Settings.PresetDate { title = "Preset", date = today } ]
+
+        -- , presets = []
         , dateInputSettings = dateInputSettings
     }
 
@@ -108,18 +128,29 @@ view model =
         [ h1 [ style "margin-bottom" "1rem" ] [ text "SingleDatePicker Example" ]
         , div []
             [ div [ style "margin-bottom" "1rem" ]
-                [ text "This is a basic picker" ]
-            , div [ style "position" "relative", style "margin-bottom" "1rem" ]
-                [ case model.pickedTime of
-                    Just date ->
-                        text (posixToDateString model.zone date ++ " " ++ posixToTimeString model.zone date)
-
-                    Nothing ->
-                        text "No date selected yet!"
+                [ text "This is the picker rendered with a date input" ]
+            , div [ style "position" "relative", style "margin-bottom" "1rem", style "width" "250px" ]
+                [ SingleDatePicker.viewDateInput []
+                    (userDefinedDatePickerSettings model.zone model.currentTime)
+                    model.currentTime
+                    model.dateInputPickerTime
+                    model.dateInputPicker
+                ]
+            , div [ style "margin-bottom" "1rem" ]
+                [ text "This is the detached picker rendered on click of a button" ]
+            , div [ style "position" "relative", style "margin-bottom" "1rem", style "display" "flex", style "gap" "1rem", style "align-items" "center" ]
+                [ button [ id "my-button", onClick (OpenDetachedPicker "my-button") ] [ text "Open the picker here" ]
+                , SingleDatePicker.view
+                    (userDefinedDatePickerSettings model.zone model.currentTime)
+                    model.detachedPicker
                 , div []
-                    [ SingleDatePicker.viewDateInput [ onClick OpenPicker ]
-                        (userDefinedDatePickerSettings model.zone model.currentTime)
-                        model.picker
+                    [ text "Picked time: "
+                    , case model.detachedPickerTime of
+                        Just t ->
+                            text (Utilities.posixToDateString model.zone t ++ " " ++ Utilities.posixToTimeString model.zone t)
+
+                        Nothing ->
+                            text "No date selected yet!"
                     ]
                 ]
             ]
@@ -130,8 +161,10 @@ init : ( Model, Cmd Msg )
 init =
     ( { currentTime = Time.millisToPosix 0
       , zone = Time.utc
-      , pickedTime = Nothing
-      , picker = SingleDatePicker.init UpdatePicker
+      , dateInputPickerTime = Nothing
+      , dateInputPicker = SingleDatePicker.init UpdateDateInputPicker
+      , detachedPickerTime = Nothing
+      , detachedPicker = SingleDatePicker.init UpdateDetachedPicker
       }
     , Task.perform AdjustTimeZone Time.here
     )
@@ -140,6 +173,7 @@ init =
 subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
-        [ SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.picker
+        [ SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.dateInputPicker
+        , SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.detachedPicker
         , Time.every 1000 Tick
         ]