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>

Answer 3

Use:

dateFormat={"EEEE"}

Or:

dateFormat={"EEE"}

Answer 4

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} />

Answer 5

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.

Answer 6

As said, you can use the prop formatWeekDay. Pass a function that should be used to format the week day and everything will work correctly!

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