Sending Dates Through Elm Ports
So you’re sending dates through ports in your Elm application, and things are getting pretty confusing. You send in a date, and you get…
Err "Expecting a String a _.date but instead got \"2017-05-01T12:45:00.000Z\""
Wait, what? Isn’t that a string already? What’s going wrong here?
How Not To Do It
Let’s examine this with a simple model and decoder.
import Date exposing (Date) import Json.Decode exposing (Decoder, Value, map, decodeValue) import Json.Decode.Extra exposing (date) type alias Model = Result String Date decoder : Decoder Date decoder = date
We’ll set everything else up like we did last time:
type Msg = UpdateModel (Result String Date) port dates : (Value -> msg) -> Sub msg subscriptions : Model -> Sub msg subscriptions _ = names (decodeValue decoder >> UpdateModel)
Everything else just updates the model with whatever value we get, and display the raw value we’re getting back. Here we go!
And… an error. What are we doing wrong? The code type checks. Ought it not just run?
The Right Way
So, what’s going on here? In short, check out how we’re sending our date over:
We’re just giving a date to Elm, which we get as a
That means that this is a valid value for
Value, but not one that we can handle.
The solution: use a value we can handle.
Let’s serialize the date instead of passing it raw.
We can do that with the handy
toISOString() method, which formats the date in ISO8601/RFC3339 format.
var date = new Date(); app.ports.dates.send(date.toISOString());
Now the date successfully deserializes and we can use it in our program.
Whenever you’re working with ports, be sure to send only values that can be decoded by the JSON Decoder.
This rarely limits you as much as you think it will (dates being probably the biggest frustration.)
If it helps, you can serialize your object as a JSON string before sending it down the pipe.
But in common cases, you should be able to find a
When you’re dealing with dates, that’s
No go forth and Elmify!