Convert date and datetime to handle maybe posix instead of string

elm.json

@@ -96,15 +96,18 @@
         "elm/core": "1.0.1 <= v < 2.0.0",
         "elm/http": "2.0.0 <= v < 3.0.0",
         "elm/json": "1.1.3 <= v < 2.0.0",
+        "elm/parser": "1.1.0 <= v < 2.0.0",
         "elm/random": "1.0.0 <= v < 2.0.0",
         "elm/regex": "1.0.0 <= v < 2.0.0",
         "elm/svg": "1.0.1 <= v < 2.0.0",
+        "elm/time": "1.0.0 <= v < 2.0.0",
         "elm-community/dict-extra": "2.4.0 <= v < 3.0.0",
         "elm-community/list-extra": "8.6.0 <= v < 9.0.0",
         "elm-community/random-extra": "3.2.0 <= v < 4.0.0",
         "elm-community/string-extra": "4.0.1 <= v < 5.0.0",
         "pablohirafuji/elm-markdown": "2.0.5 <= v < 3.0.0",
         "rtfeldman/elm-css": "17.0.1 <= v < 19.0.0",
+        "rtfeldman/elm-iso8601-date-strings": "1.1.4 <= v < 2.0.0",
         "rtfeldman/elm-sorter-experiment": "2.1.1 <= v < 3.0.0",
         "tesk9/accessible-html-with-css": "4.1.0 <= v < 6.0.0",
         "tesk9/palette": "3.0.1 <= v < 4.0.0"

src/Nri/Ui/TextInput/V7.elm

@@ -1,6 +1,6 @@
 module Nri.Ui.TextInput.V7 exposing
     ( view, generateId
-    , number, float, text, newPassword, currentPassword, email, search, addressLevel2, addressLine1, countryName, familyName, givenName, username, organization, organizationTitle, postalCode, sex, tel, date, time, datetime
+    , number, float, text, newPassword, currentPassword, email, search, addressLevel2, addressLine1, countryName, familyName, givenName, username, organization, organizationTitle, postalCode, sex, tel, date, datetime
     , readOnlyText
     , value, map
     , onFocus, onBlur, onEnter
@@ -32,7 +32,7 @@ module Nri.Ui.TextInput.V7 exposing
 
 ### Input types
 
-@docs number, float, text, newPassword, currentPassword, email, search, addressLevel2, addressLine1, countryName, familyName, givenName, username, organization, organizationTitle, postalCode, sex, tel, date, time, datetime
+@docs number, float, text, newPassword, currentPassword, email, search, addressLevel2, addressLine1, countryName, familyName, givenName, username, organization, organizationTitle, postalCode, sex, tel, date, datetime
 @docs readOnlyText
 
 
@@ -63,6 +63,7 @@ import Html.Styled.Attributes as Attributes exposing (..)
 import Html.Styled.Events as Events
 import InputErrorAndGuidanceInternal exposing (ErrorState, Guidance)
 import InputLabelInternal
+import Iso8601
 import Keyboard.Event
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
@@ -72,6 +73,8 @@ import Nri.Ui.InputStyles.V4 as InputStyles exposing (defaultMarginTop)
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Nri.Ui.Util exposing (dashify)
+import Parser
+import Time
 
 
 {-| An input that allows text entry
@@ -485,13 +488,13 @@ sex onInput_ =
 
 {-| An input that allows date entry
 -}
-date : (String -> msg) -> Attribute String msg
+date : (Maybe Time.Posix -> msg) -> Attribute (Maybe Time.Posix) msg
 date onInput_ =
     Attribute
         { emptyEventsAndValues
-            | toString = Just identity
+            | toString = Just (Maybe.map (Iso8601.fromTime >> String.slice 0 10) >> Maybe.withDefault "")
-            , fromString = Just identity
+            , fromString = Just (Iso8601.toTime >> Result.toMaybe)
-            , onInput = Just (identity >> onInput_)
+            , onInput = Just (Iso8601.toTime >> Result.toMaybe >> onInput_)
         }
         (\config ->
             { config
@@ -502,34 +505,15 @@ date onInput_ =
         )
 
 
-{-| An input that allows time entry
--}
-time : (String -> msg) -> Attribute String msg
-time onInput_ =
-    Attribute
-        { emptyEventsAndValues
-            | toString = Just identity
-            , fromString = Just identity
-            , onInput = Just (identity >> onInput_)
-        }
-        (\config ->
-            { config
-                | fieldType = Just "time"
-                , inputMode = Nothing
-                , autocomplete = Nothing
-            }
-        )
-
-
 {-| An input that allows datetime entry
 -}
-datetime : (String -> msg) -> Attribute String msg
+datetime : (Maybe Time.Posix -> msg) -> Attribute (Maybe Time.Posix) msg
 datetime onInput_ =
     Attribute
         { emptyEventsAndValues
-            | toString = Just identity
+            | toString = Just (Maybe.map (Iso8601.fromTime >> String.dropRight 1) >> Maybe.withDefault "")
-            , fromString = Just identity
+            , fromString = Just (Iso8601.toTime >> Result.toMaybe)
-            , onInput = Just (identity >> onInput_)
+            , onInput = Just (Iso8601.toTime >> Result.toMaybe >> onInput_)
         }
         (\config ->
             { config

styleguide-app/Examples/TextInput.elm

@@ -21,6 +21,9 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.TextInput.V7 as TextInput
 import ViewHelpers exposing (viewExamples)
+import Time
+import Iso8601
+import Parser
 
 
 moduleName : String
@@ -68,6 +71,7 @@ example =
                         ]
                     )
                         :: customizableExamples state
+                        
             in
             [ ControlView.view
                 { ellieLinkConfig = ellieLinkConfig
@@ -335,7 +339,14 @@ customizableExamples state =
             }
         , toExample
             { name = "date"
-            , toString = identity
+            , toString = (\result ->
+                case result of
+                    Just date ->
+                        date |> Iso8601.fromTime >> String.slice 0 10
+
+                    Nothing ->
+                        ""
+            )
             , inputType = TextInput.date
             , inputTypeCode = "TextInput.date"
             , inputTypeValueCode = \value -> Code.string (Maybe.withDefault "" value)
@@ -343,19 +354,16 @@ customizableExamples state =
             , onBlur = "onBlur"
             , onEnter = "onEnter"
             }
-        , toExample
-            { name = "time"
-            , toString = identity
-            , inputType = TextInput.time
-            , inputTypeCode = "TextInput.time"
-            , inputTypeValueCode = \value -> Code.string (Maybe.withDefault "" value)
-            , onFocus = "onFocus"
-            , onBlur = "onBlur"
-            , onEnter = "onEnter"
-            }
         , toExample
             { name = "datetime"
-            , toString = identity
+            , toString = (\result ->
+                case result of
+                    Just date ->
+                        date |> Iso8601.fromTime >> String.dropRight 1
+
+                    Nothing ->
+                        ""
+            )
             , inputType = TextInput.datetime
             , inputTypeCode = "TextInput.datetime"
             , inputTypeValueCode = \value -> Code.string (Maybe.withDefault "" value)
@@ -369,6 +377,7 @@ customizableExamples state =
 {-| -}
 type alias State =
     { inputValues : Dict Int String
+    , date : Maybe Time.Posix
     , showPassword : Bool
     , control : Control ExampleConfig
     }
@@ -378,6 +387,7 @@ type alias State =
 init : State
 init =
     { inputValues = Dict.empty
+    , date = Nothing
     , showPassword = False
     , control = initControl
     }
@@ -439,6 +449,7 @@ controlAttributes =
 {-| -}
 type Msg
     = SetInput Int String
+    | SetDate (Result (List Parser.DeadEnd) Time.Posix)
     | SetShowPassword Bool
     | UpdateControl (Control ExampleConfig)
 
@@ -461,3 +472,16 @@ update msg state =
             ( { state | control = newControl }
             , Cmd.none
             )
+
+        SetDate result ->
+            let 
+                _ = Debug.log "SetDate" result
+            in
+            case result of
+                Ok date ->
+                    ( { state | date = Just date }
+                    , Cmd.none
+                    )
+
+                Err _ ->
+                    ( state, Cmd.none )

styleguide/elm.json

@@ -19,6 +19,7 @@
             "elm/random": "1.0.0",
             "elm/regex": "1.0.0",
             "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm-community/dict-extra": "2.4.0",
             "elm-community/list-extra": "8.7.0",
@@ -27,6 +28,7 @@
             "myrho/elm-round": "1.0.5",
             "pablohirafuji/elm-markdown": "2.0.5",
             "rtfeldman/elm-css": "17.1.1",
+            "rtfeldman/elm-iso8601-date-strings": "1.1.4",
             "rtfeldman/elm-sorter-experiment": "2.1.1",
             "tesk9/accessible-html-with-css": "4.1.0",
             "tesk9/palette": "3.0.1",
@@ -36,7 +38,6 @@
             "SwiftsNamesake/proper-keyboard": "4.0.0",
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
-            "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.3",
             "justinmimbs/date": "4.0.1",
             "justinmimbs/time-extra": "1.1.1",
@@ -56,4 +57,4 @@
             "mgold/elm-nonempty-list": "4.2.0"
         }
     }
-}
+}