2023年3月15日 18:03:33go评论94阅读模式

英文:

Use Flexbox to update from Column to Row

问题

我想要的是：将月份从左到右排列，第一行显示JAN FEB MAR。

JAN    FEB    MAR
APR    MAY    JUN

在更新react-datepicker中的日期选择器月份时遇到问题。下面的图像显示每行有4个月。此外，月份似乎超出了分配的宽度309px。尝试将月份框适应到分配的空间内，每行显示3个月。

所使用的库：react-datepicker；

虽然可以适应框内，但月份的对齐不正确。

要求如下：

JAN    FEB    MAR
APR    MAY    JUN
...

经过一些调整，我可以得到以下结果。对于这个要求，我会感激您的帮助：即，将月份从左到右排列，每行显示3个月。

.react-datepicker__month-wrapper{
  display: flex;
  flex-direction: column; //--&gt;已更新
}

.react-datepicker__month {
  // margin: 4rem;
  text-align: center;
  display: flex;
  flex-direction: row;   //--&gt;已更新
  margin:auto;
  padding-top: 10px;
}

浏览器元素
[![enter image description here][2]][2]

浏览器元素
[![enter image description here][3]][3]

英文:

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; //--&gt;updated
}

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

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

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

答案1

得分: 1

请注意，代码部分已经被排除，以下是翻译好的内容：

尝试这样做：

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。

更多信息：链接

英文:

Try this:

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

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

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

答案2

得分: 1

在 react-datepicker__month 上使用 flex-wrap: wrap 以使其换行。
从 react-datepicker__month-wrapper 中删除 flex-direction: column;。
使用 showThreeColumnMonthYearPicker。

.react-datepicker__month {
  flex-wrap: wrap; /* 新增 */
}

.react-datepicker__month-wrapper {
  /* flex-direction: column; */ /* 新增 */
}

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

英文:

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 (
    &lt;div className=&quot;App&quot;&gt;
      &lt;DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker /* NEW */
        minViewMode=&quot;months&quot;
        dateFormat=&quot;MMM-yyyy&quot;
        excludeDates={[
          1661990400000, 1664582400000, 1667260800000, 1672531200000,
        ]}
        onChange={(e) =&gt; {}}
      /&gt;
    &lt;/div&gt;
  );
}

答案3

得分: 1

以下是代码部分的翻译，如你所要求的：

有一个包装每4个月的 `<div>`，具有类名 `.react-datepicker__month-wrapper`。

[![enter image description here][1]][1]
访问 [`CODESANDBOX`](https://codesandbox.io/s/vigorous-wildflower-8nx77l?file=/src/flatpicker.css)

上述布局可以通过像这样更改代码轻松获得

将 `showFourColumnMonthYearPicker` 更改为 `showThreeColumnMonthYearPicker`

最终代码应如下所示
============================

```jsx
   <DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker  // <= 更改此行
        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;
}


希望这有助于你的需求。

<details>
<summary>英文:</summary>

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

[![enter image description here][1]][1]
Visit [`CODESANDBOX`](https://codesandbox.io/s/vigorous-wildflower-8nx77l?file=/src/flatpicker.css)

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

Change `showFourColumnMonthYearPicker` to `showThreeColumnMonthYearPicker`  

Finally Code Should Look Like
============================

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



  [1]: https://i.stack.imgur.com/UNsX3.png

</details>



# 答案4
**得分**: 1

请查看[这个示例][1]，我尽力按照您的描述来制作它。

基本上，我所做的是使用以下CSS代码：

```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; /* 使用flex代替flex-basis */
  box-sizing: border-box;
  padding: 0 2px; /* 添加内边距以防止月份粘在一起 */
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  text-align: center;
  padding: 0.6rem 0;
  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;
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

使用Flexbox将布局从纵向列更改为横向行。

问题

答案1

答案2

Do the folowing:

1.

2.

3.

答案3

Redux Toolkit: 我应该同时使用 useSelector 和 useCallback 吗？

onnxruntime-web A tensor's dims must be a number array

Dropdown按钮在使用Tailwind CSS时无法按预期工作。

为什么每次发出消息时，我的Flask服务器的SocketIO连接事件都会被调用？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论