How to store the state in the URL ?

[davecarlson]

I cannot seem to get the range working while also storing the state in the URL.

When I use this method rather than a useState to store the from and to, every click thinks that I am setting the 'to' , and not the from:

const [dateRange] = useDateRange(); // returns an object of date objects from the URL (parses the iso date into a js date)

const handleRangeChange = (value: DateRange): void => {
    const params = new URLSearchParams(router.query as any);
    
    value?.from ? params.set("from", DateTime.fromJSDate(value.from).toISODate()) : params.delete("from");
    value?.to ? params.set("to", DateTime.fromJSDate(value.to).toISODate())
      : params.delete("to");

    router.push(`${router.pathname}?${params.toString()}`);
  };


<Calendar mode="range" defaultMonth={date.from} selected={date} onSelect={handleRangeChange} numberOfMonths={2} />

[gpbl]

@davecarlson could you provide a full working code?

Note that defaultMonth is used for the initial render of the calendar, may you want to use month and setMonth:

<Calendar month={date.from} onMonthChange={setMonth} />

https://daypicker.dev/docs/navigation#onmonthchange

[davecarlson]

So I want to be able to have a Calendar that 'defaults' to the current week. In this scenario, there is no ?from=&to= in the URL.

When I open the calendar, on first click of the date I want to set the new from, and on 2nd click, set the to.
This is working fine using a standard useState().

When I use a custom hook for storing these in the url however, the above mentioned behaviour happens.

Here is full code:

// page.tsx

import { DateTime } from "luxon";
import { useRouter } from "next/router";

type DateRangeType =  {
  from: Date;
  to: Date;
};

const useDateRange = (defaultValue?: DateRangeType | undefined) => {
  const router = useRouter();

  const setDateRange = (payload) => {
    const params = new URLSearchParams(router.query as any);
    payload?.from
      ? params.set("from", DateTime.fromJSDate(payload.from).toISODate())
      : params.delete("from");
    payload?.to
      ? params.set("to", DateTime.fromJSDate(payload.to).toISODate())
      : params.delete("to");

    router.push(`${router.pathname}?${params.toString()}`);
  };

  const from = router.query.from
    ? new Date(router.query.from as string)
    : defaultValue?.from
      ? defaultValue.from
      : null;

  const endDate = router.query.to
    ? new Date(router.query.to as string)
    : defaultValue?.to
      ? defaultValue.to
      : null;

  const dateRange: DateRange = {
    from,
    to,
  };
  return [dateRange, setDateRange] as const;

export default function Page() {

  const [date] = useDateRange({ from: DateTime.local().startOf("week"), to: DateTime.local().endOf('week') });


  return (
    <Calendar month={date.from} mode="range" selected={date} onSelect={setDateRange} numberOfMonths={2} />
  )

}