javascript - ¿Existe alguna manera de cambiar el menú desplegable del mes en react-datepicker para mostrar el número en lugar del nombre?

Así que tengo aquí

 <DatePicker
   selected={value?.toDate()}
   onChange={(date) => this.handleMonthChange(date)}
   inline
   showMonthYearPicker
   dateFormat={this.props.formatString}
   />

Quiero lograr eso en lugar de Jan. Mostrará 01, y así sucesivamente para otros meses. Gracias

Respuesta #1

Tendrás que definir un método renderMonthContent y pasarlo como una prop a tu DatePicker.

Como la variable month es el índice del mes (y como tal, enero es 0 en lugar de 1), incrementamos en 1.

Además, añadimos .toString().padStart(2, 0) para lograr la presentación de siempre 2 dígitos que deseas.

const Component = () => {
  const renderMonthContent = (month, shortMonth, longMonth) => {
    return <span>{(month+1).toString().padStart(2, 0)}</span>;
  };
  ...

  return (
    <DatePicker
       selected={value?.toDate()}
       onChange={(date) => this.handleMonthChange(date)}
       inline
       showMonthYearPicker
       dateFormat={this.props.formatString}
       renderMonthContent={renderMonthContent}
       />
    ...
  );
};

Resultados :