How can I change the format for react datepicker days of the week?

Question

I am using React Datepicker and all is working great.

Instead of having "Su" "Mo" "Tu" etc. for days of the week, I'd like to use something like this:

"Sun" "Mon" "Tue" 

I am accomplishing this via css:

.react-datepicker__day-name {
    ...
    &:first-child {
        &:after {
            visibility: visible;
            position: relative;
            left: -0.5rem;
            text-align: center;
            content: "Sun";
        }
    }
}

It seems to work, but also seems pretty "hacky". Is there a configuration option that I'm missing somewhere that I can specify what format(s) I'd like to use?

Thank you for any suggestions!

EDIT

Here is how I am (trying) to pass the dateFormat to my component:

App.js

this.state = {
    startDate: new Date(),
    dateFormat: 'ddd'
};


...

render() {
    ...
     <ReservationCalendar
         dateFormat={ this.state.dateFormat }
         startDate={ this.state.startDate  }
     />
}

ReservationCalendar.js

const ReservationCalendar = ({dateFormat, startDate}) => (
    <Calendar
        dateFormat={ dateFormat }
        startDate={ startDate }/>
);

export default ReservationCalendar;

DatePicker.js

const Calendar = ({dateFormat, startDate}) => (
    <div className="my-calendar">
        <DatePicker
            inline
            dateFormat={ dateFormat }
            selected={ startDate }
        />
    </div>
);

export default Calendar;

With everything like that, I'm still getting a view like i've attached. Maybe I'm not passing something through correctly. Thank you again for your time!

Answer 1

Needed something similar at work recently. This is how I was able to do it using formatWeekDay prop:

<DatePicker
  formatWeekDay={nameOfDay => nameOfDay.substr(0,3)}
/>;

Note: Couldn't find this prop in public facing docs though.

Answer 2

You can use useWeekdaysShort attribute of react-datepicker.

e.g:

<DatePicker>
useWeekdaysShort={true}
</DatePicker>