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
0
votes
2 answers

react-datepicker not editable when passing in selected date

When using react-datepicker and passing in a date I am not able to edit the date. _updateStartDate = (value) => { this.setState({ startDate: value }); }
ellsworthck
  • 3
  • 2
0
votes
0 answers

How to specify width of React Datepicker popper width to take 100% of the parent?

I'm using ReactDatepicker and massively impressed by the number of customizations they offer right off the box, thank you very much for that. Here is a real world problem I'm struggling with. As you can see there are three columns: choose a…
Mars Robertson
  • 12,673
  • 11
  • 68
  • 89
0
votes
3 answers

react-datepicker select object range when handle select

I'm using react-datepicker to building my application. Follow my source code here: https://codesandbox.io/s/xr76olj70o I wanna get an object with startDate and endDate when I choose a specified day like this: {startDate: "24-07-2018", endDate:…
Thuan Nguyen
  • 876
  • 3
  • 16
  • 32
0
votes
0 answers

Override the style of react datepicker popper className

Im trying to override the margin-top style of react-datepicker-popper: .react-datepicker-popper[data-placement^="bottom"] { margin-top: 10px; So in my main.scss file i'm writing .react-datepicker-popper[data-placement^="bottom"] { …
RamAlx
  • 6,976
  • 23
  • 58
  • 106
0
votes
1 answer

How to pick multiple dates in one go with react-datepicker?

I know that there are other packages which help in picking multiple dates. But is there any way I can do this using react-datepicker only?
psvs
  • 199
  • 1
  • 4
  • 14
0
votes
2 answers

React Datepicker

I'm trying to create small calendar calculator which subtracts two dates and give amount of days. For that I've chosen library react-datepicker. Now I have a problem that state updates one click after. This means that when I choose date 2nd time I…
Sergey
  • 7,184
  • 13
  • 42
  • 85
0
votes
1 answer

react-datepicker "Unable to preventDefault inside passive event listener invocation"

I'm implementing react-datepicker with portal mode. It works good on browser but following error happens on mobile(browser mobile mode). Unable to preventDefault inside passive event listener invocation After some researching, I've applied…
Smart Solutions
  • 869
  • 2
  • 10
  • 30
0
votes
1 answer

How to disable current date(today) in React Date Picker in ReactJs?

I have tried possible ways to disable current date from React Datepicker. Below is my code.
Amruth
  • 5,792
  • 2
  • 28
  • 41
0
votes
2 answers

react-dates date differnce with momentjs

Hello i want to display the difference between 2 dates which i get from react-dates with momentjs. The dates are getting displayed, but the const Diff shows NaN. I have done everything according to the docs of momentjs…
HarryTgerman
  • 107
  • 1
  • 5
  • 19
0
votes
0 answers

How to convert date ICT to UTC?

I had problem with UTC time . I have a date Thu Nov 23 2017 00:00:00 GMT+0700 (ICT) And now want to convert to 23 Nov 2017 17:00:00 GMT But result is after convert is 22 Nov 2017 17:00:00 GMT This is my code: let myDate = new…
Thuc Hồ
  • 75
  • 3
  • 12
0
votes
1 answer

Modify a react library

I have a task from UX designers to create a datepicker that displays multiple months + time. In our project, we are currently using react-datepicker library to manage our datepickers. This is the react component used in our project:…
FNMT8L9IN82
  • 483
  • 1
  • 9
  • 22
0
votes
0 answers

React-Datepicker: Using Moment creating a date range between a certain date to highlight dates

I am using react-datepicker to highlight date ranges. I want to highlight every date after a certain date. It is using moment for its date. I have currently tried this. highlightDates={[ { "react-datepicker__day--highlighted-custom-1": [ …
Totals
  • 311
  • 2
  • 5
  • 14
0
votes
2 answers

React Datepicker with redux-form

How to make the react-datepicker bind with redux-form? I have this redux-form field:
Welp
  • 357
  • 1
  • 5
  • 17
0
votes
0 answers

Stretch the date picker to full width

I am using react-datepicker.
Check In
vijayst
  • 20,359
  • 18
  • 69
  • 113
0
votes
1 answer

React-datepicker changes date but not time

I'm using Moment.js with react-datepicker. It works as intended in terms of the date transformation to ISO-8601, but I can't get it compliant with the time. Here's my component: Stated initially: this.state = { from: moment().subtract(7,…
cbll
  • 6,499
  • 26
  • 74
  • 117
1 2 3
…
32
33