Как я могу изменить формат для выбора даты недели? - PullRequest
0 голосов
/ 14 июня 2019

Я использую React Datepicker и все работает отлично.

Вместо «Су», «Мо», «Ту» и т. Д. Для дней недели, я хотел бы использовать что-то вроде этого:

"Sun" "Mon" "Tue" 

Я выполняю это черезcss:

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

Кажется, что работает, но также кажется довольно "хакерским".Есть ли параметр конфигурации, который мне не хватает где-то, чтобы я мог указать, какой формат (ы) я хотел бы использовать?

Спасибо за любые предложения!

РЕДАКТИРОВАТЬ

Вот как я (пытаюсь) передать dateFormat моему компоненту:

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;

Со всем этим я все еще получаю вид, как яПрикрепил.Может я что-то не правильно передаю.Еще раз спасибо за ваше время!

enter image description here

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете использовать реквизит с именем dateFormat, чтобы отформатировать дату до желаемого результата.Чтобы получить дни как Sun Mon Tue, передайте dateFormat="ddd" в качестве реквизита для компонента.Вот так

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