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

Question

I am trying to change the width of the datepiker but I do not achieve.

Here is my code:

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

I tried this style={{width: "800px"}} but it does not work... Could you help me please?

Thank you very much !

NB: my code is here https://codesandbox.io/s/react-datepicker-forked-ljh6y

Answer 1

You can directly modify the style of the generated element:

.picker-input__text {
  width: 800px;
}

I assume that you would also like it be resized for smaller screens. You can also include

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

Forked Codesandbox: https://codesandbox.io/s/react-datepicker-forked-pn9fr

Answer 2

You might wanna use

 .picker-input__text { width: 800px; }

OR you can use Standalone Calendar component and add adjoining logic with your custom input.