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 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 =

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:

app.ports.dates.send(new Date);

We’re just giving a date to Elm, which we get as a Value. Values are handy, but they’re basically implemented as wrappers around plain ol’ JavaScript objects. That means that this is a valid value for Value, but not one that we can handle. Whoops!

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();


Now the date successfully deserializes and we can use it in our program.

And Done!

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 toString-style method to call on your JavaScript object. When you’re dealing with dates, that’s toISOString.

No go forth and Elmify!

"I've been working on this Elm JSON Decoder for days and I haven't made any progress… send help!"

Find your way with The JSON Survival Kit, a short ebook that shows you the bigger picture of Elm's Json.Decode library. Slap your email in the box on this page and I'll send you a sample: Chapter 2: Get What You Need Out of JSON Objects.

You will also get notifications when I release new articles, along with other freebies that I only share with my mailing list.

The JSON Survival Kit by Brian Hicks