Skip to content

Commit

Permalink
Merge pull request #3 from FabHof/next
Browse files Browse the repository at this point in the history
Next
  • Loading branch information
FabHof authored May 14, 2020
2 parents 15ee50f + 85ba53e commit 9d70848
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 52 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Date Picker
# Date Picker [![release](https://github-basic-badges.herokuapp.com/release/FabHof/elm-ui-datepicker.svg)](https://package.elm-lang.org/packages/fabhof/elm-ui-datepicker/latest/) [![codecov](https://codecov.io/gh/FabHof/elm-ui-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/FabHof/elm-ui-datepicker) ![CI](https://github.com/FabHof/elm-ui-datepicker/workflows/CI/badge.svg?branch=master)

A reasonable date picker for the awesome [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/).

At it's core, this date picker is just a wrapper around [Element.Input.text](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Input#text). It uses [justinmimbs/date](https://package.elm-lang.org/packages/justinmimbs/date/latest/) to represent dates.
At it's core, this date picker is just a [Element.Input.text](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Input#text) with a few more features.

It also depends on [justinmimbs/date](https://package.elm-lang.org/packages/justinmimbs/date/latest/) to represent dates without time and timezones.

[See it in action here.](https://fabhof.github.io/elm-ui-datepicker/)

Expand Down
2 changes: 1 addition & 1 deletion docs.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"name":"DatePicker","comment":"\n\n\n# Basic Usage\n\n@docs input, Model, init, setToday, ChangeEvent, update, Settings, defaultSettings, initWithToday\n\n\n# Helpers\n\nFor when you want to be more in control\n\n@docs close, open, setVisibleMonth\n\n","unions":[{"name":"ChangeEvent","comment":" Use in your update function:\n\n update msg model =\n case msg of\n ChangePicker changeEvent ->\n case changeEvent of\n DateChanged date ->\n -- update both date and text\n ( { model\n | date = Just date\n , dateText = Date.toIsoString date\n }\n , Cmd.none\n )\n\n TextChanged text ->\n ( { model\n | date =\n -- parse the text in any way you like\n Date.fromIsoString text\n |> Result.toMaybe\n |> Maybe.Extra.orElse model.date\n , dateText = text\n }\n , Cmd.none\n )\n\n DateCleared ->\n ( { model\n | date =\n Nothing\n , dateText = \"\"\n }\n , Cmd.none\n )\n\n PickerChanged subMsg ->\n -- internal stuff changed\n -- call DatePicker.update\n ( { model\n | pickerModel =\n model.pickerModel\n |> DatePicker.update subMsg\n }\n , Cmd.none\n )\n\n","args":[],"cases":[["DateChanged",["Date.Date"]],["TextChanged",["String.String"]],["PickerChanged",["DatePicker.Msg"]]]},{"name":"Model","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"Settings","comment":" ","args":["msg"],"type":"{ firstDayOfWeek : Time.Weekday, language : Maybe.Maybe DatePicker.Language, disabled : Date.Date -> Basics.Bool, pickerAttributes : List.List (Element.Attribute msg), headerAttributes : List.List (Element.Attribute msg), tableAttributes : List.List (Element.Attribute msg), dayAttributes : List.List (Element.Attribute msg), wrongMonthDayAttributes : List.List (Element.Attribute msg), todayDayAttributes : List.List (Element.Attribute msg), selectedDayAttributes : List.List (Element.Attribute msg), disabledDayAttributes : List.List (Element.Attribute msg), previousMonthElement : Element.Element msg, nextMonthElement : Element.Element msg }"}],"values":[{"name":"close","comment":" Closes the date picker.\n\nExample: close date picker on date input:\n\n DateChanged date ->\n ( { model\n | date = Just date\n , dateText = Date.toIsoString date\n , pickerModel =\n model.pickerModel\n |> DatePicker.close\n }\n , Cmd.none\n )\n\n**Note**: the date picker will reopen on _enter_ and _click_.\nTo prevent this, close the date picker on every update:\n\n PickerChanged subMsg ->\n ( { model\n | pickerModel =\n model.pickerModel\n |> DatePicker.update subMsg\n --picker will never open\n |> DatePicker.close\n }\n , Cmd.none\n )\n\n","type":"DatePicker.Model -> DatePicker.Model"},{"name":"defaultSettings","comment":" Reasonable default settings.\n","type":"DatePicker.Settings msg"},{"name":"init","comment":" The initial model of the date picker.\nEasy to us in your own init function:\n\n(You probably want to get todays date to give it to the date picker using [DatePicker.setToday](DatePicker#setToday))\n\n init =\n ( { date = Nothing\n , dateText = \"\"\n , pickerModel = DatePicker.init\n }\n , Task.perform SetToday Date.today\n )\n\n","type":"DatePicker.Model"},{"name":"initWithToday","comment":" The initial model of the date picker and sets the given date as today.\n","type":"Date.Date -> DatePicker.Model"},{"name":"input","comment":" This view function is a wrapper around `Input.text`, with a more complex `onChange`, a `selected` date, the internal `model` and some `settings`\n","type":"List.List (Element.Attribute msg) -> { onChange : DatePicker.ChangeEvent -> msg, selected : Maybe.Maybe Date.Date, text : String.String, label : Element.Input.Label msg, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), model : DatePicker.Model, settings : DatePicker.Settings msg } -> Element.Element msg"},{"name":"open","comment":" Opens the date picker\n\nExample: start with open picker:\n\n init : ( Model, Cmd Msg )\n init =\n ( { date = Nothing\n , dateText = \"\"\n , pickerModel =\n DatePicker.init\n |> DatePicker.open\n }\n , Task.perform SetToday Date.today\n )\n\n","type":"DatePicker.Model -> DatePicker.Model"},{"name":"setToday","comment":" Sets the day that should be marked as today.\n","type":"Date.Date -> DatePicker.Model -> DatePicker.Model"},{"name":"setVisibleMonth","comment":" Sets the current visible month of the date picker.\n","type":"Date.Date -> DatePicker.Model -> DatePicker.Model"},{"name":"update","comment":" ","type":"DatePicker.Msg -> DatePicker.Model -> DatePicker.Model"}],"binops":[]}]
[{"name":"DatePicker","comment":"\n\n\n# Basic Usage\n\n@docs input, Model, init, setToday, ChangeEvent, update, Settings, defaultSettings, initWithToday\n\n\n# Helpers\n\nFor when you want to be more in control\n\n@docs close, open, setVisibleMonth\n\n","unions":[{"name":"ChangeEvent","comment":" Use in your update function:\n\n update msg model =\n case msg of\n ChangePicker changeEvent ->\n case changeEvent of\n DateChanged date ->\n -- update both date and text\n ( { model\n | date = Just date\n , dateText = Date.toIsoString date\n }\n , Cmd.none\n )\n\n TextChanged text ->\n ( { model\n | date =\n -- parse the text in any way you like\n Date.fromIsoString text\n |> Result.toMaybe\n |> Maybe.Extra.orElse model.date\n , dateText = text\n }\n , Cmd.none\n )\n\n DateCleared ->\n ( { model\n | date =\n Nothing\n , dateText = \"\"\n }\n , Cmd.none\n )\n\n PickerChanged subMsg ->\n -- internal stuff changed\n -- call DatePicker.update\n ( { model\n | pickerModel =\n model.pickerModel\n |> DatePicker.update subMsg\n }\n , Cmd.none\n )\n\n","args":[],"cases":[["DateChanged",["Date.Date"]],["TextChanged",["String.String"]],["PickerChanged",["DatePicker.Msg"]]]},{"name":"Model","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"Settings","comment":" ","args":[],"type":"{ firstDayOfWeek : Time.Weekday, language : Maybe.Maybe DatePicker.Language, disabled : Date.Date -> Basics.Bool, pickerAttributes : List.List (Element.Attribute Basics.Never), headerAttributes : List.List (Element.Attribute Basics.Never), tableAttributes : List.List (Element.Attribute Basics.Never), dayAttributes : List.List (Element.Attribute Basics.Never), wrongMonthDayAttributes : List.List (Element.Attribute Basics.Never), todayDayAttributes : List.List (Element.Attribute Basics.Never), selectedDayAttributes : List.List (Element.Attribute Basics.Never), disabledDayAttributes : List.List (Element.Attribute Basics.Never), previousMonthElement : Element.Element Basics.Never, nextMonthElement : Element.Element Basics.Never }"}],"values":[{"name":"close","comment":" Closes the date picker.\n\nExample: close date picker on date input:\n\n DateChanged date ->\n ( { model\n | date = Just date\n , dateText = Date.toIsoString date\n , pickerModel =\n model.pickerModel\n |> DatePicker.close\n }\n , Cmd.none\n )\n\n**Note**: the date picker will reopen on _focus_ and _click_.\nTo prevent this, close the date picker on every update:\n\n PickerChanged subMsg ->\n ( { model\n | pickerModel =\n model.pickerModel\n |> DatePicker.update subMsg\n --picker will never open\n |> DatePicker.close\n }\n , Cmd.none\n )\n\n","type":"DatePicker.Model -> DatePicker.Model"},{"name":"defaultSettings","comment":" Reasonable default settings.\n","type":"DatePicker.Settings"},{"name":"init","comment":" The initial model of the date picker.\nEasy to us in your own init function:\n\n(You probably want to get todays date to give it to the date picker using [DatePicker.setToday](DatePicker#setToday))\n\n init =\n ( { date = Nothing\n , dateText = \"\"\n , pickerModel = DatePicker.init\n }\n , Task.perform SetToday Date.today\n )\n\n","type":"DatePicker.Model"},{"name":"initWithToday","comment":" The initial model of the date picker and sets the given date as today.\n","type":"Date.Date -> DatePicker.Model"},{"name":"input","comment":" Use it like you would `Input.text`, the attributes, `text`, `placeholder` and `label` will behave \nexactly like for `Input.text`. It has however a more complex `onChange`, a `selected` date, the internal `model` and some `settings`.\n\n**Note**: `Events.onClick`, `Events.onFocus` and `Events.onLoseFocus` are used internally by the date picker.\nThis means, that **your own `Events.onClick`, `Events.onFocus` and `Events.onLoseFocus` attributes have no effect and will not fire**.\n\n","type":"List.List (Element.Attribute msg) -> { onChange : DatePicker.ChangeEvent -> msg, selected : Maybe.Maybe Date.Date, text : String.String, label : Element.Input.Label msg, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), model : DatePicker.Model, settings : DatePicker.Settings } -> Element.Element msg"},{"name":"open","comment":" Opens the date picker\n\nExample: start with open picker:\n\n init : ( Model, Cmd Msg )\n init =\n ( { date = Nothing\n , dateText = \"\"\n , pickerModel =\n DatePicker.init\n |> DatePicker.open\n }\n , Task.perform SetToday Date.today\n )\n\n","type":"DatePicker.Model -> DatePicker.Model"},{"name":"setToday","comment":" Sets the day that should be marked as today.\n","type":"Date.Date -> DatePicker.Model -> DatePicker.Model"},{"name":"setVisibleMonth","comment":" Sets the current visible month of the date picker.\n","type":"Date.Date -> DatePicker.Model -> DatePicker.Model"},{"name":"update","comment":" ","type":"DatePicker.Msg -> DatePicker.Model -> DatePicker.Model"}],"binops":[]}]
45 changes: 41 additions & 4 deletions examples/CustomDesign.elm
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import DatePicker exposing (ChangeEvent(..))
import Element exposing (padding)
import Element.Background as Background
import Element.Border as Border
import Element.Events as Events
import Element.Font as Font
import Element.Input as Input
import Html exposing (Html)
Expand All @@ -23,6 +24,15 @@ type alias Model =
type Msg
= ChangePicker ChangeEvent
| SetToday Date
| OnFocus
| OnLoseFocus
| OnClick
| OnDoubleClick
| OnMouseDown
| OnMouseUp
| OnMouseEnter
| OnMouseLeave
| OnMouseMove


init : ( Model, Cmd Msg )
Expand All @@ -31,7 +41,6 @@ init =
, dateText = ""
, pickerModel =
DatePicker.init
|> DatePicker.open
}
, Task.perform SetToday Date.today
)
Expand All @@ -40,7 +49,25 @@ init =
view : Model -> Html Msg
view model =
Element.layout [] <|
DatePicker.input [ Element.width Element.shrink, Element.centerX, Element.centerY ]
DatePicker.input
[ Element.width (Element.px 180)
, Element.centerX
, Element.centerY
, Element.padding 42
, Background.color (Element.rgb255 158 60 99)
, Border.color (Element.rgb255 0 0 0)
, Border.rounded 0
, Element.below (Element.text "Some text below")
, Events.onFocus OnFocus
, Events.onLoseFocus OnLoseFocus
, Events.onClick OnClick
, Events.onDoubleClick OnDoubleClick
, Events.onMouseDown OnMouseDown
, Events.onMouseUp OnMouseUp
, Events.onMouseEnter OnMouseEnter
, Events.onMouseLeave OnMouseLeave
, Events.onMouseMove OnMouseMove
]
{ onChange = ChangePicker
, selected = model.date
, text = model.dateText
Expand All @@ -61,6 +88,9 @@ update msg model =
( { model
| date = Just date
, dateText = Date.toIsoString date
, pickerModel =
model.pickerModel
|> DatePicker.close
}
, Cmd.none
)
Expand All @@ -84,7 +114,6 @@ update msg model =
| pickerModel =
model.pickerModel
|> DatePicker.update subMsg
|> DatePicker.open
}
, Cmd.none
)
Expand All @@ -98,10 +127,18 @@ update msg model =
, Cmd.none
)

_->
let
_ =
Debug.log "Will you see this?" msg
in
( model, Cmd.none )



{-| If you want to have the date picker look crazy - you can do it!
-}
settings : DatePicker.Settings msg
settings : DatePicker.Settings
settings =
let
default =
Expand Down
2 changes: 1 addition & 1 deletion examples/Settings.elm
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ init =
)


settings : DatePicker.Settings msg
settings : DatePicker.Settings
settings =
let
default =
Expand Down
Loading

0 comments on commit 9d70848

Please sign in to comment.