You could create a new date out of the old date plus the element that
changed due to input. I'm new to Elm, so my solution is not pretty, but
maybe it helps get on the right track. You also might want to check out the
date
extra package
<http://package.elm-lang.org/packages/rluiten/elm-date-extra/7.0.0>.
Something like this (not tested):
import Html exposing(..)
import Html.App as Html
import Html.Attributes exposing(..)
import Html.Events exposing (onInput)
import Date exposing(..)
import Result exposing(..)
type alias Model = Result String Date
type Msg =
YearChange String
| MonthChange String
| DayChange String
main = Html.beginnerProgram
{ model = default
, update = update
, view = view
}
default = Date.fromString "1990-01-01"
update : Msg -> Model -> Model
update msg model =
let
maybeModel = Result.toMaybe model
yearCur = resolveMaybe maybeModel year 90 |> toString
monthCur = resolveMaybe maybeModel month Jan |> toString
dayCur = resolveMaybe maybeModel day 1 |> toString
in
case msg of
YearChange yearNew ->
newDate (yearNew, monthCur, dayCur)
MonthChange monthNew ->
newDate (yearCur, monthNew, dayCur)
DayChange dayNew ->
newDate (yearCur, monthCur, dayNew)
resolveMaybe : Maybe Date -> (Date -> a) -> a -> a
resolveMaybe maybeModel extractor default =
case maybeModel of
Nothing -> default
Just val -> extractor val
newDate : (String, String, String) -> Model
newDate (y,m,d) =
Date.fromString
<| dateString (y, m, d)
dateString : (String, String, String) -> String
dateString (y,m,d) =
toString y ++ "/" ++ m ++ "/" ++ d
view : Model -> Html Msg
view model =
let
maybeModel = Result.toMaybe model
yearCur = resolveMaybe maybeModel year 90 |> toString
monthCur = resolveMaybe maybeModel month Jan |> toString
dayCur = resolveMaybe maybeModel day 1 |> toString
in
div[]
[ input [type' "number", placeholder "1990", onInput YearChange ] [ ]
, input [type' "number", placeholder "1", onInput MonthChange ] [ ]
, input [type' "number", placeholder "1", onInput DayChange ] [ ]
, div[] [text (dateString (toString yearCur, toString monthCur, toString
dayCur)) ]
]
On Thursday, June 30, 2016 at 10:30:13 AM UTC+2, Max Froumentin wrote:
>
> Hi there,
> I'm writing a web app with a Date in the model, which I would like to map
> to 3 input (type=text) fields, for day, month and year.
> I'm stuck as to how to modify the model's date when the user changes one
> of the fields.
>
> The Date type doesn't seem to have a way to modify a single field, and I'm
> not sure how you collect the three input values in one update.
>
> Am I missing something, or are models expected to map 1-to-1 with form
> elements?
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
