-
Notifications
You must be signed in to change notification settings - Fork 2
/
DateTimePicker.elm
113 lines (95 loc) · 3.2 KB
/
DateTimePicker.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
107
108
109
110
111
112
113
module Components.Double.DateTimePicker exposing
( Model
, Msg
, init
, update
, view
)
import Clock
import DatePicker
import DatePicker.Types exposing (DateLimit(..), ViewType(..))
import DateTime exposing (DateTime)
import Extra.DateTime as DateTimeExtra
import Extra.I18n exposing (Language, getI18n, timePickerI18n)
import Html exposing (Html, br, div, h3, span, text)
import Html.Attributes exposing (class)
import Time exposing (Posix, Weekday)
import TimePicker.Types as TimePicker
type alias Model =
{ picker : DatePicker.Model
, selectedDateTime : Maybe DateTime
}
init : Language -> Weekday -> Posix -> Model
init language startingWeekday todayPosix =
let
today =
DateTime.fromPosix todayPosix
-- Allow 6 months in advance and in the past selection.
( minDate, maxDate ) =
let
( past, future ) =
( DateTimeExtra.decrementMonths 6 today
, DateTimeExtra.incrementMonths 6 today
)
in
( Maybe.withDefault past <| DateTime.setDay 1 past
, Maybe.withDefault future <| DateTime.setDay (DateTime.lastDayOf future) future
)
calendarConfig =
{ today = today
, startingWeekday = startingWeekday
, primaryDate = Nothing
, dateLimit = DateLimit { minDate = minDate, maxDate = maxDate }
}
timePickerConfig =
Just
{ pickerType = TimePicker.HH_MM { hoursStep = 1, minutesStep = 5 }
, defaultTime = Clock.midnight
, pickerTitle = timePickerI18n language
}
i18n =
Just (getI18n language)
in
{ picker =
DatePicker.initialise Double calendarConfig timePickerConfig i18n
, selectedDateTime = Nothing
}
type Msg
= PickerMsg DatePicker.Msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
PickerMsg subMsg ->
let
( updated, subCmd, extMsg ) =
DatePicker.update subMsg model.picker
selectedDateTime =
case extMsg of
DatePicker.None ->
model.selectedDateTime
DatePicker.DateSelected dateTime ->
dateTime
in
( { model
| picker = updated
, selectedDateTime = selectedDateTime
}
, Cmd.map PickerMsg subCmd
)
view : Model -> Html Msg
view { picker, selectedDateTime } =
div [ class "section" ]
[ h3 [] [ text "Double Date-Time Picker" ]
, Html.map PickerMsg (DatePicker.view picker)
, br [] []
, case selectedDateTime of
Just sdt ->
div [ class "footer" ]
[ span [ class "text" ] [ text "Selected DateTime: " ]
, span [ class "date" ] [ text (DateTimeExtra.toString sdt) ]
]
Nothing ->
div [ class "footer" ]
[ text "No \"selected date\" yet"
]
]