[Solved]-How can I change the format for react datepicker days of the week?-Reactjs

You can use a prop called dateFormat to format the date to your desired output. To get the days as Sun Mon Tue, pass dateFormat="ddd" as a props to the component. Like this way

<DatePicker
dateFormat="ddd"
onChange={this.handleChange} />

The DayPicker allows you to pass custom elements for the days of the week using the weekdayElement prop. Thus, you could create a Weekday element, translate the name to the long name using the formatWeekdayLong method from react-day-picker utils, and cut that name down to a string of 3 characters. Something like the following worked for me:

const Weekday = ({ weekday, className, localeUtils, locale }) => {
    const longWeekday = localeUtils.formatWeekdayLong(weekday, locale);
    const newWeekday = longWeekday.substring(0,3);

    return <div className={className}>{newWeekday}</div>;
};


// Date Picker Component
const InputDatePicker = () => {
  return (
    <div className='input-date-picker__container'>
      <DayPicker
        weekdayElement={<Weekday />}
      />
    </div>
  );
};

If you look at the localeUtils parameter passed to the Weekday component you will see there are a lot of handy methods passed there.

Use:

dateFormat={"EEEE"}

Or:

dateFormat={"EEE"}

You can use useWeekdaysShort attribute of react-datepicker.

e.g:

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

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.