6
votes

Comment puis-je changer le format des jours de la semaine de datepicker de réaction?

J'utilise React Datepicker et tout fonctionne très bien.

Au lieu d'avoir "Su" "Mo" "Tu" etc. pour les jours de la semaine, j'aimerais utiliser quelque chose comme ceci:

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

export default Calendar;

J'accomplis cela via css:

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

export default ReservationCalendar;

Cela semble fonctionner, mais semble aussi assez "hacky". Y a-t-il une option de configuration qui me manque quelque part et que je peux spécifier le ou les formats que je souhaite utiliser?

Merci pour vos suggestions!

ÉDITER

Voici comment j'essaie de transmettre le dateFormat à mon composant:

App.js

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


...

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

ReservationCalendar.js

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

DatePicker.js

"Sun" "Mon" "Tue"

Avec tout comme ça, j'obtiens toujours une vue comme je l'ai attachée. Peut-être que je ne passe pas quelque chose correctement. Merci encore pour votre temps!

reactjs react-datepicker

0 commentaires

4 Réponses :

0
votes

Vous pouvez utiliser un accessoire appelé dateFormat pour formater la date en fonction de la sortie souhaitée. Pour obtenir les jours comme Sun Mon Tue , transmettez dateFormat="ddd" comme accessoire au composant. Comme de cette façon

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

1 commentaires

Merci pour votre suggestion. J'ai mis à jour ma question pour montrer comment je transmets les propriétés. J'ai essayé d'ajouter dateFormat mais pas de chance. Peut-être que je ne le passe pas correctement?

9
votes

J'avais besoin de quelque chose de similaire au travail récemment. Voici comment j'ai pu le faire en utilisant le prop formatWeekDay :

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

Remarque: Impossible de trouver cet accessoire dans les documents publics.

0 commentaires

3
votes

Vous pouvez utiliser l'attribut useWeekdaysShort de react-datepicker.

par exemple:

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

0 commentaires

1
votes

Utilisation:

dateFormat={"EEEE"}

Ou:

dateFormat={"EEE"}

0 commentaires