React Date-picker Selecting a Range of days not working

Question

I would like to show a specific range of selected Dates from React Date-Picker. I have tried with their documentation site demo code. but this code is not working .what will be the solution? Below is my sample code, `

import React, { useState } from 'react';
import { addDays, format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';

const pastMonth = new Date();
const App = () => {
  const defaultSelected: DateRange = {
    from: pastMonth,
    to: addDays(pastMonth, 4)
  };
  const [range, setRange] = useState < DateRange | undefined > (defaultSelected);
  let footer = <p>Please pick the first day.</p>;
  if (range?.from) {
    if (!range.to) {
      footer = <p>{format(range.from, 'PPP')}</p>;
    } else if (range.to) {
      footer = (
        <p>
          {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
        </p>
      );
    }
  }
  return (
    <div>
      <DayPicker
        mode="range"
        defaultMonth={pastMonth}
        selected={range}
        footer={footer}
        onSelect={setRange}
      />
    </div>
  );
};

export default App;

`

I have tried to react day picker documentation site Selecting a Range of days demo code and I would like to show and selete range of date based on react: 18.2.0

I copied your code and it works completely. my react version is 18.2.0 what is your error? — Kamran Davar, Nov 16 '22 at 10:14
under const defaultSelected DateRange shows an error: Type annotations can only be used in TypeScript files.ts(8010) — Aknath, Nov 16 '22 at 14:56

score 0 · Accepted Answer · answered Nov 16 '22 at 16:00

I remove all types from prev code for use as js code. try this:

import React, { useState } from 'react';
import { addDays, format } from 'date-fns';
import {  DayPicker } from 'react-day-picker';

const pastMonth = new Date();
const App = () => {
  const defaultSelected = {
    from: pastMonth,
    to: addDays(pastMonth, 4)
  };
  const [range, setRange] = useState(defaultSelected);
  let footer = <p>Please pick the first day.</p>;
  if (range?.from) {
    if (!range.to) {
      footer = <p>{format(range.from, 'PPP')}</p>;
    } else if (range.to) {
      footer = (
        <p>
          {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
        </p>
      );
    }
  }
  return (
    <div>
      <DayPicker
        mode="range"
        defaultMonth={pastMonth}
        selected={range}
        footer={footer}
        onSelect={setRange}
      />
    </div>
  );
};

export default App;

Now it's working and I have found my mistake – Aknath Nov 16 '22 at 17:53 — Aknath, Nov 16 '22 at 17:53

React Date-picker Selecting a Range of days not working

1 Answers1