如何更改日期选择器的宽度？答案

【问题标题】：How can I change the width of my datepicker?如何更改日期选择器的宽度？
【发布时间】：2020-12-01 09:58:52
【问题描述】：

我正在尝试更改 datepiker 的宽度，但没有实现。

这是我的代码：

import React from "react";
import ReactDOM from "react-dom";

import { DatePicker, RangeDatePicker } from "@y0c/react-datepicker";
// import calendar style
// You can customize style by copying asset folder.
import "@y0c/react-datepicker/assets/styles/calendar.scss";

// Please include the locale you want to use.
// and delivery props to calendar component
import "dayjs/locale/ko";
import "dayjs/locale/en";
import "./styles.css";

const Panel = ({ header, children }) => (
  <div style={{ height: "300px" }}>
    <h1>{header}</h1>
    <div>{children}</div>
  </div>
);

function App() {
  const onChange = title => (...args) => console.log(title, args);
  return (
    <div className="App">
      <Panel header="Simple DatePicker">
        <DatePicker style={{width: "800px"}} showToday onChange={onChange("DatePicker")} />
      </Panel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我试过这个style={{width: "800px"}}，但它不起作用......你能帮帮我吗？

非常感谢！

注意：我的代码在这里https://codesandbox.io/s/react-datepicker-forked-ljh6y

【问题讨论】：

这样的？ nimb.ws/jPSwBK
绝对是的！

标签： javascript css reactjs datepicker

【解决方案1】：

可以直接修改生成元素的样式：

.picker-input__text {
  width: 800px;
}

我假设您也希望它针对较小的屏幕进行调整。您还可以包括

@media (max-width: 900px) {
  .picker-input__text {
    width: 250px;
  }
}

分叉代码沙盒：https://codesandbox.io/s/react-datepicker-forked-pn9fr

【讨论】：

【解决方案2】：

你可能想用

.picker-input__text {
    width: 800px;
}

或者您可以使用独立日历组件并使用您的自定义输入添加相邻逻辑。

【讨论】：