How to format time for hourly forecast in Weather card?

Development
1

I’m not sure how to format the datetime object for an hourly forecast in the frontend weather card. I’m pretty sure the data is coming out right (and the daily forecast works correctly), but all of the hours are labelled with the day instead of the hour.

Here’s the data:

<hourlyForecast dateTimeUTC="201806121300">
<condition>Mainly sunny</condition>
<iconCode format="png">01</iconCode>
<temperature unitType="metric" units="C">17</temperature>
<lop category="Nil" units="%">0</lop>
<windChill unitType="metric"/>
<humidex unitType="metric"/>
<wind>
<speed unitType="metric" units="km/h">5</speed>
<direction windDirFull="Variable direction">VR</direction>
<gust unitType="metric" units="km/h"/>
</wind>
</hourlyForecast>

This is how I’m doing it right now:

    forecast_array = []

    if forecast_type == 'hourly':
        hours = data_element.findall('./hourlyForecastGroup/hourlyForecast')
        for h in range(0, 24):
            forecast_array.append({
                ATTR_FORECAST_TIME: datetime.datetime.strptime(
                    hours[h].attrib['dateTimeUTC'],
                    '%Y%m%d%H%M').astimezone().isoformat(),
                ATTR_FORECAST_TEMP: int(hours[h].findtext('./temperature')),
                ATTR_FORECAST_CONDITION: icon_code_to_condition(
                    int(hours[h].findtext('./iconCode')))
            })

    return forecast_array

And here’s what it looks like in the GUI:

weather-card
weather-card756×1490 133 KB

Thanks for your help.

2

Oh, I see now that it’s hard-coded to certain providers. Here’s the extract from https://github.com/home-assistant/home-assistant-polymer/blob/master/src/cards/ha-weather-card.js#L240:

  computeDateTime(data) {
    const date = new Date(data);
    const provider = this.stateObj.attributes.attribution;
    if (provider === 'Powered by Dark Sky' || provider === 'Data provided by OpenWeatherMap') {
      return date.toLocaleTimeString(
        this.hass.selectedLanguage || this.hass.language,
        { hour: 'numeric' }
      );
    }
    return date.toLocaleDateString(this.hass.selectedLanguage || this.hass.language, { weekday: 'short' });
  }

I’ll do up a PR to make this more generic.