AnswerBun.com

How can I change the width of my datepicker?

Stack Overflow Asked on January 13, 2021

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

2 Answers

You might wanna use

.picker-input__text {
    width: 800px;
}

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

Answered by Sanchit Kumar on January 13, 2021

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

Answered by m4n0 on January 13, 2021

Add your own answers!

Related Questions

Unable to understand error in D flip flop code

2  Asked on November 29, 2021 by chaitanya_12789

 

Git: Stashed Changes But Still Can’t Pull

1  Asked on November 29, 2021 by crawfordbenjamin

     

elif a==”no”: ^ SyntaxError: invalid syntax

3  Asked on November 29, 2021 by mayar-kurdi

 

ValueError: Unconverted data remains .000

2  Asked on November 29, 2021 by vbdashes

       

How to make an arraylist for the last dice rolls?

3  Asked on November 29, 2021 by acidixs

 

XMLRead all same Notes

2  Asked on November 29, 2021 by ddave

   

Find the most frequent words that appear in the dataset

3  Asked on November 29, 2021 by pythonnew

   

Jenkins auto generates wrong config for composer

1  Asked on November 29, 2021 by tiny-sunlight

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir