Search code examples
reactjsdatedatetimetimeline

React-Horizontal-Timeline: How to only display "year" label using getLabel

React-Horizontal-Timeline requires input date as YYY-MM-DD but I only want to display YYYY

Solution

  • Based on the docs, it looks like you need to provide a sorted list of dates in yyyy-mm-dd format. Then you write a getLabel function that React-Horizontal-Timeline can use to derive the label from those dates. 

    <HorizontalTimeline 
  values=['1984-10-10', '1985-11-10', '1986-10-10']
  getLabel={function(date) { return date.slice(0, 4); }}
  ...remaining props
/>

    Here I am using the .slice method to extract yyyy from yyyy-mm-dd.