Question 388666 in CSS Question posted in
Some basic documentation can be found here.

Css – How to add custom height and width to react DatePicker component?

I am using react-datepicker package and i need to add a custom height and width.

I tried with popperClassName prop but its not working correctly. Is there any way to style the height and width of the entire calendar? This is my component.

                    <DatePicker 
                        selected={startDate} 
                        dateFormat="MM/yyyy/dd"
                        // showMonthYearPicker
                        popperPlacement="top-end"
                        popperClassName={Styles.calendarPopper}
                   
                        icon={<SmCalenderIcon />}
                        onChange={(date) => handleDateChange(date)}
                        // wrapperClassName={Styles.dateWrapper}
                        // showIcon
                        className={Styles.datePicker}
                        // minDate={subDays(startDate, 7)}
                        maxDate={new Date()}
                        shouldCloseOnSelect={false}
                  />
Tags:

2

Answers


  1. 0

    1- Create a custom CSS file: Define your custom styles for the date picker.

    .custom-calendar {
    width: 400px; /* Set your desired width */
    height: 400px; /* Set your desired height */
}
enter code here
/* Optional: Additional styling for inner elements */
.custom-calendar .react-datepicker__month-container {
    height: 100%; /* Ensure the inner container takes the full height */
}

    2 – Import the CSS file in your component: Ensure your custom CSS file is imported so the styles are applied.

    import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './custom-datepicker.css'; // Import your custom styles

const MyDatePicker = () => {
    const [startDate, setStartDate] = React.useState(new Date());

    return (
        <DatePicker
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            calendarClassName="custom-calendar" // Apply your custom class
        />
    );
};

export default MyDatePicker;

    By following these steps, you should be able to style the react-datepicker component with custom height and width. Ensure that your styles are specific enough to override any default styles provided by the react-datepicker package.

    Login or Signup to reply.
  2. 0

    Another way can be by using styled components

    npm install styled-components

    import styled from 'styled-components';
const StyledDatePicker = styled(DatePicker)`
  width: 200px;  // Custom width
  height: 40px;  // Custom height
  .react-datepicker-wrapper {
    width: 100%;
  }
  .react-datepicker__input-container input {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
`;

 <StyledDatePicker 
      selected={startDate} 
      dateFormat="MM/yyyy/dd"
      popperPlacement="top-end"
      icon={<SmCalenderIcon />}
      onChange={handleDateChange}
      maxDate={new Date()}
      shouldCloseOnSelect={false}
    />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search