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

我正在製作一個允許選擇日期和時間的界面。所以第一件事就是將所述日期存儲在模型字段date: Date中。比我會有例如一個DatePicker來選擇一個年 - 月 - 日的部分。對於小時和分鐘，我想我需要兩個輸入字段或選擇字段或計數器字段或任何與onInput事件觸發器。如何更新榆樹模型中的日期字段

問題是：我如何繼續說上述事件？如果只更改小時或分鐘數，如何更新模型中的日期？

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

來源

2016-11-28 lonelyelk

答案真的取決於你需要什麼樣的日期選擇器;實施一種方法有很多種。

只是作爲一個例子，這裏是你如何能充分利用HTML5的日期選擇器和timepicker（榆樹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庫可以幫助您實現您的需求。例如見elm-datepicker。

來源

2016-11-28 15:04:08 Simone

使用html5控件是一個好主意。但它有一個很好的方式來獲得榆木日期類型的值嗎？否則，我必須以某種方式構建一個查詢將其發送到服務器。更新：沒關係。我發現，使用Date類型時，我將不得不以某種不明顯的方式構建查詢。 – lonelyelk

我結束了使用這個方法，因爲datepicker和timepicker都給出了一個很好的方法來構造一個字符串來使用'Date.fromString'。你甚至可以添加一個時區選擇器。 – lonelyelk

您有幾種選擇，但他們每個人都需要通過拉動每個日期部分退出當前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軟件包可能更容易。

來源

2016-11-28 14:56:19

也許最好自己寫。由於這個圖書館不允許在飛行中改變時區。 – lonelyelk

更新：無所謂:)我看到，js沒有一個好的時區操作工具。 – lonelyelk

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

回答

相關問題