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

How to apply custom styling on react-datepicker with css modules?

I am trying to apply custom styling on react-datepicker datepicker input. Using modules: .custom-input { border-radius: 10px !important; padding: 5px 10px 5px 30px !important; border: 2px solid #cccccc !important; font-size: 16px…
Alex T
  • 3,529
  • 12
  • 56
  • 105
1
vote
0 answers

Disable time in End date in React date picker up to where start time is selected

I want to disable previous selected start date and time in the End date, I managed to disable date but not time. I am using react date picker and Codesandbox link, Thanks in advance.
tinyVariant
  • 45
  • 6
1
vote
1 answer

react-datepicker - datepicker pushing other elements to the right on toggle and messes up my layout

So when I'm toggling the react-datepicker (when the datepicker is shown) it pushes other elements to the right meaning that it messes up my layout. I tried targeting __tab-loop classes with css (display: none) I'm also utilizing max-width on my…
emre-ozgun
  • 676
  • 1
  • 7
  • 17
1
vote
0 answers

Any Month - Year range selection picker in React js?

is there Any Month - Year range selection picker in React js except css frameworks like material ui , bootstrap ?
Sandeep Kumar
  • 11
  • 1
1
vote
1 answer

ReferenceError: exports is not defined error in Next.js

I am seeing the following error with react-datetime-picker v3.5.0 and Next.js. Unhandled Runtime Error ReferenceError: exports is not defined Call Stack eval node_modules/react-datetime-picker/dist/DateTimePicker.js…
Viraj
  • 777
  • 1
  • 13
  • 32
1
vote
2 answers

react-datepicker highlighting date ranges in other months

I am using react-datepicker and noticed that when using date ranges, dates in any month that is not the current month is highlighted based on the selected startDate and endDate. How do I remove this?
John McGellan
  • 61
  • 1
  • 6
1
vote
1 answer

disable days of the week with react-datepicker

I only want to disable the days of the week that I choose, or otherwise enable the days that I need here is an illustrative image I found this code in the documentation but it doesn't work for me () => { const [startDate, setStartDate] =…
Martin Carp
  • 55
  • 6
1
vote
0 answers

Has anyone used React-Loki + React-datepicker?

Has anyone tried to use datepicker with react-loki? Getting Cannot read properties of undefined (reading 'type') when I choose a date. I have tried using both methods from startDate or endDate but getting same error. I am pretty new to this so I am…
MyMoose
  • 11
  • 2
1
vote
0 answers

React Datepicker with react-hook-form Controller outputting undefined on form submit. Starting value passed from props

I am using react-datepicker inside react-hook-form's Controller. I passed the starting date from props to my form component, then I use useState to store that prop value in the component state. The type of the variable seems to be a date object, but…
Brenden Pennington
  • 11
  • 2
1
vote
0 answers

React date-picker set a previous date from selected date

I just started learning front-end technologies (React) and facing an issue with react date picker API. Whenever I select a date from the UI, it displays correctly on the UI but when I bind the date to send it over to the server to save the record,…
Atul Rai
  • 332
  • 1
  • 10
  • 25
1
vote
1 answer

Link Year, Month and Day input fields in a date picker

I am trying to customize React Datepicker for my React application following this document - https://reactdatepicker.com/ I have 3 input fields for choosing the date - Year, Month and Day. Now I need to link those fields to make sure if the user…
sazzad rahman
  • 23
  • 2
  • 5
1
vote
1 answer

How is it possible to use react-hook-form with react-datepicker select range?

I want to select a time range with react-datepicker, and also use react-hook-form to validate when onBlur without input, here is my code:
呂學霖
  • 43
  • 2
  • 7
1
vote
1 answer

Customize react DatePicker component with left border color and DatePicker Icon

So, I am new to React Date picker and I am trying to redesign the following screenshot. I ended up designing it as follows. Here is My React Component code. import React, { useState } from "react"; import DatePicker from "react-datepicker"; import…
Teshie Ethiopia
  • 586
  • 8
  • 27
1
vote
0 answers

How to show Month, Year, Date in separate input fields in react. Any npm package suggestion would be appreciated

I am using react date picker package in my current react project. I have date/month/year in a single input field. However I would like separate them into individual input fields. Currently I have like this How ever I would like to display fields…
Rakeys
  • 55
  • 1
  • 5
1
vote
1 answer

How to apply chakra-ui styles to custom components? (react-datepicker)

I'd like to define styles for my Datepicker component through the Chakra-ui styles. import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { chakra } from '@chakra-ui/react'; const StyledDatepicker =…
Jimmy-P
  • 141
  • 1
  • 6
1 2 3
…
32 33