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 increase the dimensions of react-datepicker calender?

How can i increase the width and height of the calender popup. I checked there documentation and github pages nothing shows how to increase the width and height. i am using react-datepicker for calender i have given width and height to…
Jeesmon Joy
  • 196
  • 1
  • 2
  • 16
1
vote
0 answers

How to browse months that have dates disabled?

I'm working with this library: https://reactdatepicker.com/ I'm trying to make a "smart calendar" and for that i have just some available dates, in April, May and June. These dates are passed in prop includeDates. I'm showing two months…
M.G
  • 11
  • 3
1
vote
1 answer

Manually change month without changing selected date

In react-datepicker with custom header, you get access to methods called increaseMonth() and decreaseMonth() (same for year). These methods change the view without changing the date. What I need is to mimic these in my Datepicker component. My goal…
symphony
  • 21
  • 4
1
vote
1 answer

I don't understand why I am getting the value of dob as an object when in use react-datepicker

when I console log the value of dob, its an object instead of a string initial state const initialValues = { registrationForm: { dob: { elementType: 'date', elementConfig: { name: 'dob', …
Galavu
  • 21
  • 4
1
vote
1 answer

How to add Custom Buttons in React Datepicker Model

I want to create a calendar like this. The Issue is I don't know how to add Apply and Cancel button in It. I have tried multiple solutions, But failed to get desired solution. Through this block of code of I got this. Kindly help me to add Button…
Muhammad Farooq Usman
  • 38
  • 8
1
vote
1 answer

Change background color(default white) in "react-native-date-picker" plugin

[How can i change the background colour which is white , i want to set it according to my theme colour (example. orange, blue , default) ](https://i.stack.imgur.com/p4xS6.png) I have tried few code like
Manali Tailor
  • 11
  • 1
1
vote
0 answers

How to implement vertical scroll using react-dates library?

I'm having a hard time understanding the part of the react-dates documentation where it implements vertical scrolling in the calendar. DOC: https://react-dates.github.io/react-dates/?path=/story/daypickerrangecontroller--vertical-scrollable This…
user270284
  • 41
  • 3
1
vote
1 answer

Material UI Date Range Picker not working

I went & copied the source code directly from material UI official website: Website Link Installed all the required dependencies. Still the Project was not working. So tried the sandbox link for that snippet on the same official website. Sandbox…
Balaji KR
  • 73
  • 8
1
vote
1 answer

Invalid hooks call: Hooks can only be called inside of the body of a function component

Hello I'm trying to use a react-big-calendar component inside a function component for my use-case. So, when I use a react-datepicker, I'm getting this hook warning. Here is my code. import format from "date-fns/format"; import getDay from…
SKG
  • 332
  • 3
  • 23
1
vote
0 answers

Arabic support in React DatePicker library, with number also change in arabic

This calendar is built on Angular with material Design, I need same the same output when I change my locale to ar-SA in react with react-datepicker When I am changing locale to "ar-SA"(Arabic- Saudi Arabia), it is just placing the items from right…
Nadeem Akram
  • 11
  • 2
1
vote
1 answer

React Calendar value getting stored with one day less in database

import React, { useState, useEffect } from "react"; import style from "./step1.module.css"; import { Calendar } from "react-date-range"; function Step2({ onNextClick, step }) { const [date1, setDate1] = useState({ dateFilled: new…
user2026504
  • 69
  • 1
  • 9
1
vote
0 answers

React-datepicker component working on Storybook but onChange function does not fire in app

I'm new to React, typescript and storybook. I added a date range picker to my storybook app using the react-datepicker library. This component works normally in the storybook and the onChange prop gives me the start date and end date I selected, but…
Nick Halden
  • 11
  • 2
1
vote
1 answer

How to handle multiple Datepickers in React hooks?

In a React project, I'm able to handle single instance of Datepicker easily, but, what if there are multiple instances of it. When date is changed, it doesn't get updated but, can be seen in console. What are possible solutions to handle it…
Prakash Patil
  • 247
  • 2
  • 11
1
vote
2 answers

React Datepicker - prevent range with disabled dates in between

I am using react-datepicker for a booking system. I am using filterDate to disable some dates.
Jolan
  • 681
  • 12
  • 39
1
vote
2 answers

React-datepicker with custom input with manual typing

I am trying to create react-datepicker component with custom styled input: } onChangeRaw={(e) => handleChangeRaw(e)} onChange={(date:…
Alex T
  • 3,529
  • 12
  • 56
  • 105
1 2 3
…
32 33