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
1 answer

How to convert a UTC date to "MM/DD/YYYY" for react-datepicker?

I use react-datepicker in a component for updating posts. The date and other passed to the component from MongoDB through props.This is a simple fullstack-graphql application with a CRUD functionality. Maybe the problem is with correct date…
Kiten
  • 985
  • 2
  • 17
  • 35
0
votes
1 answer

React DatePicker toggle issue

i'm using this plugin in my project. https://reactdatepicker.com There is have some prop showTimeSelect this prop takes boolean value and hide or show time picker. I'm trying to give option to user about selecting time picker, so i tried to make…
user3348410
  • 2,733
  • 10
  • 51
  • 85
0
votes
0 answers

React DatePicker 12AM to 12PM

i'm using this plugin in my react app. https://github.com/Hacker0x01/react-datepicker i'm using date format like that: dateFormat="MM/d/yyyy hhaa" my hours in hour picker starting with 12 AM end finish at 11 PM After 11 PM i wan't to add to list…
user3348410
  • 2,733
  • 10
  • 51
  • 85
0
votes
1 answer

Prevent the display of the alert `swal` (sweetalert) after the component has loaded

The swal alert appears both when you click on the event and after the component loads. How to set the swal alert to be triggered only after clicking on the event and not after every refresh of the component. Demo here:…
Mario
  • 107
  • 12
0
votes
2 answers

Modifying the tooltip in react-big-calendar

How to modify the tooltip that appears when you hover over an event? I would like to include more information (start date, end date, id, buttons(edit, delete). I tried: function Event({ event }) { return ( …
Umbro
  • 1,984
  • 12
  • 40
  • 99
0
votes
0 answers

Can't set the time value on React Datepicker

Hello I'm using react-datepicker with date limited by min, max values for time. Everything works as expected using new Date(): minTime={new Date().setHours(11)} maxTime={new Date().setHours(22)} However error occurs once I want to use tomorrows…
Verthon
  • 2,937
  • 3
  • 20
  • 32
0
votes
1 answer

How do i make React Datepicker states independent when the same DatePicker component is iterated many in a list?

I have a component that adds dynamically new fields in a list by a click of a button, then when all fields are filled it is populated to an array of objects in this format "prices": [ { "from": "2019-01-01", "to":…
Dalton Kim
  • 101
  • 1
  • 2
  • 10
0
votes
2 answers

How to display the date and time that is in the country in the React Date Picker?

The server returns me the date of example 2019-07-30, 23:59 I put it in the selected property, 23:59 is displayed in input. I live in Poland. How to change to display 23:00? I use this library: https://www.npmjs.com/package/react-datepicker    …
Umbro
  • 1,984
  • 12
  • 40
  • 99
0
votes
0 answers

React: How to get useEffect reducer function work with react-datepicker?

I'm trying to get useEffect hook to show me user-chosen times after they pick them from dropdown. My co-worker helped me start the hook usage, but I'm completely lost on what should I do. After few days of attempts, I must ask for help. At the…
Miska Rantala
  • 295
  • 1
  • 6
  • 21
0
votes
0 answers

React:I have to pick either date ranges over months or time ranges for single day

React: I have to select the date ranges or time range ON A SINGLE DAY Have date and time range but want to check either date range or time range for a single day. Which means if you select date range, have to disable to time selection where as if…
Shruti Patil
  • 31
  • 1
  • 1
  • 7
0
votes
2 answers

Trouble changing React class into a function

I heard that classes are hardly used in React anymore, since functions work so well. So, I got react-datepicker class copied elsewhere and I'm now trying to change it into a function. It doesn't quite work correctly, it gives me today's date no…
Miska Rantala
  • 295
  • 1
  • 6
  • 21
0
votes
1 answer

I can't have a beginning value for react-datepicker and still be able to change it from dropdown?

EDIT: I found the answer, check it below and add these together! I'm trying to have the react-datepicker dropdown menu to show the current start_time when it's first loaded and then the user could choose a time they want from the dropdown. Time…
Miska Rantala
  • 295
  • 1
  • 6
  • 21
0
votes
1 answer

installing react datepicker fails on build of webpack

In trying to install react-datepicker, I came across the import of css through webpack. I cannot get this installed correctly. Here is my webpack.config.js: const path = require('path'); module.exports = { module: { rules: [ …
tcoulson
  • 602
  • 3
  • 10
  • 37
0
votes
0 answers

React Date Picker in Redux Form

I am using redux form to design a user profile. In that profile I want to send user's date of birth to the redux store. In that case I am writing a function as below for date picker component. const renderBirthday = ({ input, label, meta: {…
Ruks
  • 75
  • 1
  • 9
0
votes
1 answer

Trying to re-use a component and make a property conditional

I am using React Datepicker on my application. By default, I want to use the "inline" feature so the calendar is always showing when the page loads. I am accomplishing that like this:
Damon
  • 4,151
  • 13
  • 52
  • 108
1 2 3
…
32 33