Stack Overflow
Stack Overflow

Questions tagged [react-datepicker]

React datepicker is a useful component that displays a simplified datepicker, it allows the user to select a date easily without having to know the format that the input expects.

React Datepicker

A simple and reusable datepicker component for React.

Installation

The package can be installed via NPM:

npm install react-datepicker --save

Or by using Yarn:

yarn add react-datepicker

Below are examples which also can be edited directly via the editor on the left side and will be rendered on the right.

Demo Here

490 questions
3
votes
0 answers

Why are there multiple days highlighted on react-datepicker when default time is not set?

For some reason, the component highlights two days when user selects one from the calendar with time picker on the side. After initial render, when explicit default date and time isn't set, the component is rendered as following: After user clicks…
Marek
  • 261
  • 4
  • 14
3
votes
2 answers

Insert auto-slash for date in mm/dd/yyyy format for "react-datepicker"

I am using react-datepicker in my project. The required format is mm/dd/yyyy. What I want is ,if I want to type a date it,should be in date format. Eg: I want the date 21st Jan 1980. When I pick from the datepicker it is in the correct…
dream001
  • 113
  • 2
  • 10
3
votes
1 answer

How put 'fontawesome' inside a react-datepicker in input?

How put 'fontawesome' inside a react-datepicker in input? Library: react-datepicker. Is it possible? I tried used :after on class react-datepicker__input_container
Umbro
  • 1,984
  • 12
  • 40
  • 99
3
votes
1 answer

Getting react-datepicker to appear correctly when using react-testing-library

I've been trying to figure out how to get react-testing-library working with react-datepicker. So far, I've been able to get the input box wrapped correctly, and can access it via the getByLabelText function, but I can't seem to get the date picker…
Shafiq Jetha
  • 1,337
  • 16
  • 30
3
votes
1 answer

Change the background color of calender in react-datepicker

I have to change the background-color of the popper(which is calender) in my react-datepicker to black with white font color when I toggle the theme from default(white) to black. I have tried using popperClassName, but unable to pass in the font…
Neelam
  • 31
  • 1
  • 1
  • 7
3
votes
2 answers

defaultValue is not working in react DatePicker

I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If…
Kane
  • 605
  • 2
  • 8
  • 22
3
votes
3 answers

Issue with loading react-datepicker css into jsx file

As per the react-datepicker documentation, I tried importing the css file, but react throws an error as You may need an appropriate loader to handle this file type. I have included the css-loader in webpack-config file. Is there anything…
Prem
  • 5,685
  • 15
  • 52
  • 95
3
votes
2 answers

Why doesn't this component show at all? React DatePicker

Here is the component: import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; class DatePickerCreater extends Component { constructor(props){ super(props); } render() { return ( …
LittleMygler
  • 632
  • 10
  • 24
3
votes
1 answer

React-Datepicker: showTimeSelect margins not aligning correctly

As the title states, the margins on my react-datepicker's time div look wonky. I'm using the react-datepicker npm package on version 1.2.2 (which should be the latest version of it). I've included the css for it like so in my root component where…
MEnf
  • 1,482
  • 1
  • 12
  • 18
3
votes
4 answers

Is there any other way to show the month,year except dropdown in react-datepicker?

I am using react-datepicker but for some reason, we don't want to show the month and year in the dropdown.
Gorakh Nath
  • 9,140
  • 15
  • 46
  • 68
2
votes
1 answer

How I do keep from updating the state before the end date is chosen in a date range with react-datepicker?

I have a bit of a complicated application where I'm making a chart based on the user input values. They pick a start date, and end date, and another parameter. When that extra parameter is filled, it renders the chart. The problem is when the user…
MKF
  • 426
  • 7
  • 24
2
votes
0 answers

React-datepicker css customisation in dark mode using Tailwind CSS for calendar elements

I'm trying to customise react datepicker's inside elements(calendar, headers, nav buttons) in dark & light mode while using with Tailwind css? In the below image- I'm looking to change css for those light coloured areas. I tried giving Tailwind's…
AmeeraJ
  • 71
  • 1
  • 5
2
votes
0 answers

How to avoid the React Datepicker to close when clicking outside

I'm using the react-datepicker component on my application (https://www.npmjs.com/package/react-datepicker). I want to close the datepicker calendar only when I click on a certain element that I created on the surrounding of the component, but the…
Guilherme do Valle
  • 401
  • 1
  • 4
  • 17
2
votes
2 answers

react-modal: How to get modal to auto-expand when react-datepicker is clicked? (code attached)

How to get modal to auto-expand when react-datepicker is clicked? Modal fits initially, but then when you click on the date field and the react-datepicker shows the calendar, the react-modal dialog does not auto-expand? Before: Ater clicking…
Greg
  • 34,042
  • 79
  • 253
  • 454
2
votes
0 answers

Is it possible to style the past and future dates of react date picker?

I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all…
Chinomso Johnson
  • 179
  • 3
  • 12
1 2 3
…
32 33