I am moving this feature from Sunday to Monday, because Monday is the start of the week for most people who are not in Israel. But once again I am sitting on a train to Tel Aviv and I wanted to share a package with you. This week I chose something “Dull” and functional the DatePicker by Bogdan Popa.

This package does exactly what its name would make you think it would, it provides a date picker that can be reused in the places where you might need it.

You can see an example of the datepicker at the demo page.

It has a lot of the things you want, you can start the week on any day you want. You can pass in a function to mark some days invalid (so for example you could disallow all dates before a start date, or weekend days etc.

I find that this package is useful but looking at the docs made me wish for a few things. I don’t like that the update passes back a 3-tuple of (Model, Cmd, Maybe Date). This could lead to a case where the date that is in the datepicker gets out of sync with the date that is somewhere else in the model. I would much rather have a functions like these that let you get the current date and set it again when you want too change it form some other part of the code. (For example if you are using it to do a range and the start date has gone past the end date.

I have sent a pull request with this code in it to the author.

{-|
Extract the current set date (if set) from a model
-}
getDate : Model -> Maybe Date
getDate model = model.pickedDate

{-|
Set a new date in the model
-}

setDate : Date -> Model -> Model
setDate date model = {model | pickedDate = Just date}

I also found that I may wish to be able to change the disabled dates, maybe to keep a date range valid.

Look for those changes in a future version if my pull requests get merged.

If you liked this blog post you might like my book on Testing Elm

Buy Testing Elm Now!