Questions tagged [react-daterange-picker]

24 questions
3
votes
2 answers

react-date-range create custom inputRanges

I'm using the react-date-range component and want to add some of my own custom inputRanges on the left side of the interface. At the moment it has, yesterday, last week, last month etc. I want to add "this year", "last year", "12 months…
Nathan Leggatt
  • 398
  • 1
  • 6
  • 18
3
votes
3 answers

Typescript Error using react-daterange-picker "No overload matches this call."

When I try to use react-daterange-picker in my React Typescript app, I get the error No overload matches this call. Overload 1 of 2, '(props: RangeProps | SingleProps | Readonly> |…
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
2
votes
0 answers

Ionic Calendar Date Range

I am a beginner in ReactJS and Ionic. My current project involves developing and integrating a calendar into our mobile app. However, I'm facing an issue with the lack of a built-in calendar date range feature in Ionic. I came across ion2-calendar,…
2
votes
1 answer

Erorr: A non-serializable value was detected in the state, in the path: `filters.startDate` (redux-toolkit.esm.js )

I'm getting an error here when I add a moment import moment from "moment"; const filtersDefaultState = { text: "", sortBy: "date", startDate: moment().startOf("month"), endDate: moment().endOf("month"), }; so I solve this by adding…
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…
1
vote
1 answer

How Maximum days restriction in DateRangePicker for the React?

How Maximum days restriction in DateRangePicker for the React can be achieved?
Ajay
  • 1,255
  • 1
  • 17
  • 30
1
vote
0 answers

React-Bootstrap-DateRangePicker : Problem using isInvalidDate option

I'm trying to use the react bootsrap DateRangePicker but I really don't understand the proper way to use the isInvalidDate option. This is the definition for it: isInvalidDate: (function) A function that is passed each date in the two calendars…
1
vote
1 answer

Using a callback on click of react-date-range defined ranges

How can we add a callback when clicked the encircled ranges? I want to change the input placeholder based on the range picked. For example the user clicked "This week" so the placeholder also on the right should be changed to "This week". I've red…
1
vote
1 answer

How set the validation between start date and end date should select with in the 3 years

I am new to react JS, how can I achieve the validation between two date fields in React JS. for example: End dates should allow to select only within 3 years based on start date. class MyForm extends React.Component { constructor(props) { …
0
votes
0 answers

I work on the material ui Date Range Picker and by doing this code nothing is displayed on the screen I can't understand where the problem comes from

I work on the material ui Date Range Picker and by doing this code nothing is displayed on the screen I can't understand where the problem comes from import "./date.css" import { LocalizationProvider } from "@mui/lab" import AdapterdateFns from…
0
votes
1 answer

How can i change the language of an react-date-range DefinedRange?

I've created a project that use a react-date-range component and i need to change the default language to PT. DateRangePicker is in Portuguese but the DefinedRange in English and i need it in PT. At this moment I've tried: import pt from…
André
  • 33
  • 3
0
votes
0 answers

Selection of dates on react date calendar when on mobile version

I have created an application that has a react date range calendar that works perfectly fine. Problem is when on mobile responsiveness am unable to select the dates. You are not able to select from start date to end date. Can someone please assist…
0
votes
3 answers

React Date Range Picker

I have a project am creating and I want to have a react-date-range calendar in the project. Problem is when displaying the calendar the dates are not aligned with the days. How can I[enter image description here align them properly. Calendar…
0
votes
0 answers

default date range selection in React-daterangepicker

I do not want to pre-select any value from date range in react-daterangepicker, by default it gives some value already selected if i choose for defined date range? try to give its initialsetting prop a value start : "", end: "" but it gives…
0
votes
1 answer

How to call a function on react-datePicker 'isClearable' method?

I've implemented react-datepicker in one of my projects. I'm filtering out my data based on the selected month from the react-datepicker. I want to call a function when I select a date that I am able to successfully use in the onChange? method. The…
1
2