Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reactjs datepicker date format

Beginner with ReactJS, I use now the wonderful ReactJS Datepicker. Questions about my custom date format :

  1. i found no doc to explain all the possibilities like M is month, MM is month on 2 letters, etc. (shall I look to the github code? which source?)
  2. How to add the name of the day... like Saturday. I tried dddd but it shows the number of the day with 2 leading 0 before !!
  3. How to exclude the non office hour (like hours 0 to 8 and 20 to 23), I tried the excludesTimes below but no way.

Here is my code :

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    locale={fr}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={60}
    dateFormat="dddd, DDD, ddd, d, dd MMMM yyyy à HH'h'mm"
    timeCaption="Heure"
    minDate={new Date()}
    showDisabledMonthNavigation
    placeholderText="Choisir ici ..."
    excludeTimes={[0, 1, 2, 3, 4]}
/>

Date shown in input field is then :

0023, 082, 023, 23, 23 mars 2019 à 20h00

Thanks

like image 960
Seb57 Avatar asked Mar 20 '19 22:03

Seb57


1 Answers

React datepicker uses Moment.js for dates, I think you should review the docs at his website.

For example MMMM Do YYYY, h:mm:ss a should return a date formated as March 21st 2019, 8:50:37 am.

EDIT

I went to the repo and it appears the author removed moment from package, so I gave a try to the formatting dates guide found here and it appears to be working now! Per example use "eeee" if you want day of the week.

I made a working example at codesandbox.

like image 87
Pablo Huet Carrasco Avatar answered Oct 11 '22 02:10

Pablo Huet Carrasco