javascript 使用Flexbox从列更新到行

iyfjxgzm  于 2023-03-16  发布在  Java
关注(0)|答案(4)|浏览(137)

我想要的是月份从左至右,第一行为三月一月二日。

JAN    FEB    MAR
APR    MAY    JUN

更新react-datepicker中的日期选择器月份时遇到问题。下图显示每行4个月份。此外,月份似乎超出了309px的分配宽度。正在尝试将月份框放入单行中有3个月份的分配空间中。
代码沙盒:https://codesandbox.io/s/heuristic-platform-ln6gr1?file=/src/App.js
正在使用的库:React数据选择器;

图片一

代码

.react-datepicker__month-container {
  float: left;
  display: flex;
  flex-direction: column;
  width: 309px !important;
}

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

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

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

图片二::虽然可以放入框中,但是月份的对齐不正确。

JAN    FEB    MAR
APR    MAY    JUN
...

做了一些调整后,我可以得到以下内容。我希望您能帮助的要求即,月份显示从左到右有3个月在一行。

.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;
}

浏览器元素

8wtpewkr

8wtpewkr1#

检查my example here,我已经尝试按照您的描述制作
基本上我所做的是使用这个css代码:

.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;
}
yrdbyhpb

yrdbyhpb2#

执行以下操作:

1.在react-datepicker__month上使用flex-wrap: wrap,使其换行。
1.从react-datepicker__month-wrapper中删除flex-direction: column;
1.使用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>
  );
}
rqenqsqc

rqenqsqc3#

试试这个:

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>
  );
}

对于你的CSS试试这个:从.react-datepicker__month-wrapper元素中删除display:column并将其添加到.react-datepicker__month
更多信息:链接

deikduxw

deikduxw4#

有一个div,它每4个月 Package 一次,包含一个名为.react-datepicker__month-wrapper的类。
访视CODESANDBOX
上面的布局可以很容易地通过改变代码,像这样
showFourColumnMonthYearPicker更改为showThreeColumnMonthYearPicker

最后代码应如下所示

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

相关问题