Update form example.

examples/pokedex/src/Page/Form.elm

@@ -5,6 +5,7 @@ import Form exposing (Form)
 import Head
 import Head.Seo as Seo
 import Html
+import Html.Attributes as Attr
 import Page exposing (Page, PageWithState, StaticPayload)
 import PageServerResponse exposing (PageServerResponse)
 import Pages.PageUrl exposing (PageUrl)
@@ -31,7 +32,7 @@ type alias User =
     , last : String
     , username : String
     , email : String
-    , birthYear : String
+    , birthDay : String
     }
 
 
@@ -41,7 +42,7 @@ defaultUser =
     , last = "Doe"
     , username = "janedoe"
     , email = "janedoe@example.com"
-    , birthYear = "1999"
+    , birthDay = "1969-07-20"
     }
 
 
@@ -65,8 +66,10 @@ form user =
                 |> Form.withInitialValue user.email
             )
         |> Form.required
-            (Form.number { name = "birthYear", label = "Birth Year" }
-                |> Form.withInitialValue user.birthYear
+            (Form.date { name = "dob", label = "Date of Birth" }
+                |> Form.withInitialValue user.birthDay
+                |> Form.withMinDate "1900-01-01"
+                |> Form.withMaxDate "2022-01-01"
             )
 
 
@@ -133,7 +136,20 @@ view maybeUrl sharedModel static =
     in
     { title = "Form Example"
     , body =
-        [ Html.h1 [] [ Html.text <| "Edit profile " ++ user.first ++ " " ++ user.last ]
+        [ static.data.name
+            |> Maybe.map
+                (\user_ ->
+                    Html.p
+                        [ Attr.style "padding" "10px"
+                        , Attr.style "background-color" "#a3fba3"
+                        ]
+                        [ Html.text <| "Successfully received user " ++ user_.first ++ " " ++ user_.last
+                        ]
+                )
+            |> Maybe.withDefault (Html.p [] [])
+        , Html.h1
+            []
+            [ Html.text <| "Edit profile " ++ user.first ++ " " ++ user.last ]
         , form user
             |> Form.toHtml
         ]

src/Form.elm

@@ -18,6 +18,8 @@ type alias FieldInfo =
     , label : String
     , initialValue : Maybe String
     , type_ : String
+    , min : Maybe String
+    , max : Maybe String
     }
 
 
@@ -33,6 +35,8 @@ input { name, label } =
         , label = label
         , initialValue = Nothing
         , type_ = "text"
+        , min = Nothing
+        , max = Nothing
         }
 
 
@@ -43,9 +47,43 @@ number { name, label } =
         , label = label
         , initialValue = Nothing
         , type_ = "number"
+        , min = Nothing
+        , max = Nothing
         }
 
 
+date : { name : String, label : String } -> Field
+date { name, label } =
+    Field
+        { name = name
+        , label = label
+        , initialValue = Nothing
+        , type_ = "date"
+        , min = Nothing
+        , max = Nothing
+        }
+
+
+withMin : Int -> Field -> Field
+withMin min (Field field) =
+    Field { field | min = min |> String.fromInt |> Just }
+
+
+withMax : Int -> Field -> Field
+withMax max (Field field) =
+    Field { field | max = max |> String.fromInt |> Just }
+
+
+withMinDate : String -> Field -> Field
+withMinDate min (Field field) =
+    Field { field | min = min |> Just }
+
+
+withMaxDate : String -> Field -> Field
+withMaxDate max (Field field) =
+    Field { field | max = max |> Just }
+
+
 type_ : String -> Field -> Field
 type_ typeName (Field field) =
     Field
@@ -84,20 +122,22 @@ toHtml (Form fields decoder) =
             |> List.reverse
             |> List.map
                 (\field ->
-                    Html.label
-                        []
-                        [ Html.text field.label
-                        , Html.input
-                            ([ Attr.name field.name |> Just
-                             , field.initialValue |> Maybe.map Attr.value
-                             , field.type_ |> Attr.type_ |> Just
-                             , Attr.min "1900" |> Just
-                             , Attr.max "2099" |> Just
-                             , Attr.required True |> Just
-                             ]
-                                |> List.filterMap identity
-                            )
+                    Html.div []
+                        [ Html.label
                             []
+                            [ Html.text field.label
+                            , Html.input
+                                ([ Attr.name field.name |> Just
+                                 , field.initialValue |> Maybe.map Attr.value
+                                 , field.type_ |> Attr.type_ |> Just
+                                 , field.min |> Maybe.map Attr.min
+                                 , field.max |> Maybe.map Attr.max
+                                 , Attr.required True |> Just
+                                 ]
+                                    |> List.filterMap identity
+                                )
+                                []
+                            ]
                         ]
                 )
          )