Closed Frank-AFN closed 4 years ago
@Frank-AFN Very sorry. I somehow missed to see this. I shall check into this at the earliest.
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.
@pawelkrystkiewicz Can we enable localization without any 3rd party library?
@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.
@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.
@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
@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') } />
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.
@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.
@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?
@pawelkrystkiewicz
It shouldn't be.
I would also be happy with a 24h time notation :-)
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" />
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.