Question

我正在创建一个允许选择日期和时间的界面。因此，首先要将所述日期存储在模型字段ParseResult中。比起我可以使用DatePicker来选择年 - 月 - 日部分。几小时和几分钟，我想我需要两个输入字段或选择字段或计数器字段或任何date: Date事件触发器。

问题是：我如何继续上述活动？如果仅更改小时或分钟数，如何更新模型中的日期？

onInput

Answer 1

您有几个选项，但每个选项都需要通过从当前Date值中提取每个日期部分来构建新的model.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-datepicker。

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

2 个答案: