HoneySingh
March 15, 2023
230 views
4 votes
4 Answers

WHAT I WANT IS: MONTHS TO BE FROM LEFT TO RIGHT having JAN FEB MAR in the first ROW.

JAN    FEB    MAR
APR    MAY    JUN

Encountering Problem in updating datepicker months in react-datepicker. Below image
shows 4 months in each row. Also, the months seems to be out of the allocaoted
width 309px. Trying to fit the months boxes within the allocated space having
3 months in a single row.

Library in used: react-datepicker;

Though fits into the box, however, the alignment of months is not correct.
The requirement is to have

JAN    FEB    MAR
APR    MAY    JUN
...

After doing few tweaks, I can get the following. I’d appreciate your help on the requirement i.e., Months to be displayed from left to right having 3 months in one Row.

.react-datepicker__month-wrapper{
  display: flex;
  flex-direction: column; //-->updated
}

.react-datepicker__month {
  // margin: 4rem;
  text-align: center;
  display: flex;
  flex-direction: row;   //-->Updated
  margin:auto;
  padding-top: 10px;
}

[![enter image description here][2]][2]

BROWSERS ELEMENTS
[![enter image description here][3]][3]

Answers

Try this:

import "./styles.css";
import "./flatpicker.css";
import DatePicker from "react-datepicker";
import React, { useEffect, useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="App">
      <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="MM/yyyy"
      showMonthYearPicker
      />
    </div>
  );
}

and for your Css try This:
remove display:column from your .react-datepicker__month-wrapper element and add it to .react-datepicker__month

More info: Link

Do the folowing:

Use flex-wrap: wrap on react-datepicker__month so that it wraps.
Remove flex-direction: column; from react-datepicker__month-wrapper.
Use showThreeColumnMonthYearPicker

1.

.react-datepicker__month {
  // margin: 4rem;
  text-align: center;
  display: flex;
  flex-direction: row;
  margin: auto;
  padding-top: 10px;
  flex-wrap: wrap; /* NEW */
}

2.

.react-datepicker__month-wrapper {
  display: flex;
  /* flex-direction: column; */ /* NEW */
}

3.

export default function App() {
  const ref = useRef();
  return (
    <div className="App">
      <DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker /* NEW */
        minViewMode="months"
        dateFormat="MMM-yyyy"
        excludeDates={[
          1661990400000, 1664582400000, 1667260800000, 1672531200000,
        ]}
        onChange={(e) => {}}
      />
    </div>
  );
}

There is a div that wraps every 4 month with a class called .react-datepicker__month-wrapper.

Visit CODESANDBOX

The above layout could be easily get by change code like this

Change showFourColumnMonthYearPicker to showThreeColumnMonthYearPicker

Finally Code Should Look Like

   <DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker  // <= change this line
        minViewMode="months"
        dateFormat="MMM-yyyy"
        onChange={(e) => {}}
      />

.react-datepicker__month-container {
  float: left;
  display: flex;
  flex-direction: column;
}

.react-datepicker__month-wrapper{
   display: grid;
  grid-auto-flow: column dense;
}

.react-datepicker__month {
  text-align: center;
  margin:auto;
  padding-top: 10px;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  text-align: left;
  padding:0.6rem 2.4rem;
  font-size: 14px;
}

Check my example here, I have tried to make it as you described

Basically what I did was to use this css code:

.react-datepicker__month-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.react-datepicker__month-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.react-datepicker__month {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1; /* Use flex instead of flex-basis */
  box-sizing: border-box;
  padding: 0 2px; /* Add padding to avoid months sticking together */
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  text-align: center;
  padding: 0.6rem 0;
  font-size: 14px;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Use Flexbox to update from Column to Row – CSS

Answers

Do the folowing:

1.

2.

3.

Finally Code Should Look Like