-
Notifications
You must be signed in to change notification settings - Fork 5
/
Simple.elm
106 lines (90 loc) · 2.81 KB
/
Simple.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
module Simple exposing (main)
import Browser
import Date exposing (Date)
import DatePicker exposing (ChangeEvent(..))
import Element
import Element.Input as Input
import Html exposing (Html)
import Maybe.Extra
import Task
type alias Model =
{ date : Maybe Date
, dateText : String
, pickerModel : DatePicker.Model
}
type Msg
= ChangePicker ChangeEvent
| SetToday Date
init : ( Model, Cmd Msg )
init =
( { date = Nothing
, dateText = ""
, pickerModel = DatePicker.init
|> DatePicker.open
}
, Task.perform SetToday Date.today
)
view : Model -> Html Msg
view model =
Element.layout [ ] <|
DatePicker.input [ Element.width Element.shrink, Element.centerX, Element.centerY ]
{ onChange = ChangePicker
, selected = model.date
, text = model.dateText
, label =
Input.labelAbove [] <|
Element.text "Pick A Date"
, placeholder = Just <| Input.placeholder [] <| Element.text "jjjj-MM-dd"
, settings = DatePicker.defaultSettings
, model = model.pickerModel
}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ChangePicker changeEvent ->
case changeEvent of
DateChanged date ->
-- update both date and text
( { model
| date = Just date
, dateText = Date.toIsoString date
}
, Cmd.none
)
TextChanged text ->
( { model
| date =
-- parse the text in any way you like
Date.fromIsoString text
|> Result.toMaybe
|> Maybe.Extra.orElse model.date
, dateText = text
}
, Cmd.none
)
PickerChanged subMsg ->
-- internal stuff changed
-- call DatePicker.update
( { model
| pickerModel =
model.pickerModel
|> DatePicker.update subMsg
}
, Cmd.none
)
SetToday today ->
( { model
| pickerModel =
model.pickerModel
|> DatePicker.setToday today
}
, Cmd.none
)
main : Program () Model Msg
main =
Browser.element
{ init = \_ -> init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}