Change the date format hh:mm to HH:mm:ss

[Frank-AFN]

Hi,

Currently the time show in the range 12-hour. So could you change to 24-hour Maybe I think just change hh:mm to HH:mm:ss

Thank you for your consideration.

[arunghosh]

@Frank-AFN Very sorry. I somehow missed to see this. I shall check into this at the earliest.

[pawelkrystkiewicz]

Could you also enable localization for date format? Now I have it displayed as 15-Feb-2019 which is not acceptable for polish users. Format such as 15-02-2019 would be acceptable.

[arunghosh]

@pawelkrystkiewicz Can we enable localization without any 3rd party library?

[pawelkrystkiewicz]

@arunghosh I think so.

My first flex was to use DD-MM-YYYY as default but then I remembered that we need carefully consider those options because of regional differences on date presentation. If we were to make DD-MM-YYYY default then it would lead to confusion with at least US-based users where the date is displayed in the format of MM-DD-YYYY. Then this date: 11-02-2018 would be read as 11th of February in European countries and as 2nd of November in the US.

How about props to timeline element like this:

<Timeline events={events} dateFormat="US"}/> which would result in current display format of DD-MMM-YYYY like 16-Feb-2019. and default props like this (no props passed) <Timeline events={events}/> would print date in format DD-MM-YYYY like 16-02-2018.

---

Now when I wrote all this stuff above I am left wondering if it would be so bad thing to relay on external library for this. In all of my projects I am using format from date/fns projects as it is very versatile and takes into consideration your timezone and lets you swith between 12/24 hour formats with just passing H or HH. Please consider this solution as well.

[arunghosh]

@pawelkrystkiewicz May be we can use Date.prototype.toLocaleDateString(). In that case the Timeline should accept the locale and the options.

Let me know your thoughts.

[pawelkrystkiewicz]

@arunghosh I concur. It is built-in functionality and very well documented with many options.

The only obvious caveat I can see is the closest you can get to a simple display of date is DD.MM.YYYY or DD/MM/YYYY. I don\'t see an option to replace forward slashes / with - dashes. But that's minor thing and shouldn\'t be a problem BUT if someone insist I can think of solution like this: props.userDateSeparator ? date.split('/').join(props.userDateSeparator) : null

[arunghosh]

@pawelkrystkiewicz You are right. The solution I conveyed has a limitation and will need an additional property as you mentioned.

Another way to go is to have a format function as shown below. This way user has total control over formatting.

<Timeline events={events} dateFormat={ ts => moment(ts).format('YYYY MM DD') } />

[pawelkrystkiewicz]

Back to square one then. It's your call now to choose either of this third-party libraries. Here is an article about date-fns vs moment.js I just looked through.

[arunghosh]

@pawelkrystkiewicz In the case of <Timeline events={events} dateFormat={ ts => moment(ts).format('YYYY MM DD') } />. We don't have to use 3rd party library. The consumers can use 3rd party libraries, depending on their requirement.

[pawelkrystkiewicz]

@arunghosh You're right. Sorry, I failed to notice passing whole function there. Looks nice. Won't that be a problem with splitting timestamp to date and time?

[arunghosh]

@pawelkrystkiewicz

It shouldn't be.

[svendeckers]

I would also be happy with a 24h time notation :-)

[arunghosh]

v3.0.0 has format property. For formatting options check momentjs format docs.

// default format is "hh:mm"
<Timeline items={events} format="hh:mm a" />