如何更新榆树模型中的日期字段

Question

我正在制作一个允许选择日期和时间的界面。所以第一件事就是将所述日期存储在模型字段 date: Date 中。比我有一个 DatePicker 到 select 年-月-日部分。对于数小时和数分钟，我想我需要两个输入字段或 select 字段或计数器字段或带有 onInput 事件触发器的任何内容。

问题是：我该如何处理上述事件？如果只有小时数或分钟数发生变化，我该如何更新模型中的日期？

HourChange hour ->
    { model | date = ...

Answer 1

您有几个选项，但每个选项都需要通过从当前 model.date 值中提取每个日期部分来构建一个新的 Date 值。

有一个名为 rluiten/elm-date-extra 的包公开了一个 dateFromFields 函数，可以让您指定每个日期部分。使用此库，您的代码将如下所示：

import Date exposing (..)
import Date.Extra.Create exposing (dateFromFields)

...

HourChange hour ->
    { model | date =
        dateFromFields
               (year model.date)
               (month model.date)
               (day model.date)
               hour
               (minute model.date)
               (second model.date)
               (millisecond model.date)
    }

核心 Date 包目前仅支持从字符串（或时间）创建日期。您可以通过将字符串日期连接在一起来编写与 dateFromFields 相同类型的函数，但仅导入 elm-date-extra 包可能更容易。

Answer 2

答案真的取决于你需要什么样的日期选择器；有多种实现方法。

举个例子，下面是如何利用 HTML5 的日期选择器和时间选择器 (Elm 0.18)：

import Html exposing (..)
import Html.Attributes exposing (type_)
import Html.Events exposing (onInput)


main =
    Html.beginnerProgram
        { model = initialModel
        , view = view
        , update = update
        }


-- MODEL

type alias Model =
    { date : String
    , time : String
    }


initialModel : Model
initialModel =
    { date = ""
    , time = ""
    }


-- UPDATE

type Msg
    = ChangeDate String
    | ChangeTime String


update : Msg -> Model -> Model
update msg model =
    case msg of
        ChangeDate newDate ->
            { model | date = newDate }

        ChangeTime newTime ->
            { model | time = newTime }


-- VIEW

view : Model -> Html Msg
view model =
    div []
        [ input [ type_ "date", onInput ChangeDate ] []
        , input [ type_ "time", onInput ChangeTime ] []
        , text (toString model)
        ]

问题是，这可能是您想要的，也可能不是。例如，您可能想要一个更智能的日期选择器，或者一个在可用性方面更好的日期选择器。上面的例子只是演示了其中一种可能的方式。

还有一些 Elm 库可以帮助您实现您的需求。例如参见 [=11=].

如何更新榆树模型中的日期字段

How to update a date field in elm model

time

date

datepicker

elm