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

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")} />

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

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:

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 All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir