@sz.frankyy/next-datepicker-range

NextDataRangePicker Component

This is a straightforward date picker built in Next.js that enables the marking of date ranges. It features a prop, onChange, responsible for handling both the lower and upper limits of the selected range. For instance:

<NextDataRangePicker onChange={({ lower, upper }) => {
    setLowerDay(lower);
    setUpperDay(upper);
}} />

If you wish to exclude certain dates, pass a function as a prop to check whether the day should be disabled. Additionally, you can provide a strategy to determine what occurs when a disabled date is included in the selected range. If the strategy is set to remove, the disabled dates are simply removed from the selected range. In the case where the strategy is set to disallow, the onError function is called instead. It's important to note that when the disabledDates prop is passed, the onChange function manages an array of dates, for example:

 const disabledDates = (data: Dayjs): boolean => {
    return data.day() === 0 || data.day() === 3;
  }
  
  ...

 <NextDataRangePicker
      onChange={(days: Dayjs[])=>{
        setDays(days);
      
      }}
      disabledDates={disabledDates}
      strategy="remove" />

If you wish to translate the names of weekdays, simply provide the updated values to the daysOfWeek prop:

   <NextDataRangePicker
        onChange={({ lower, upper }: { lower?: Dayjs, upper?: Dayjs }) => {
          setLowerDay(lower);
          setUpperDay(upper);
        }
      }
      daysOfWeek={['Pon', 'Wt', 'Śr', 'Czw', 'Pią', 'Sob', 'Nie']}
      />

Additionally, when the upper bound of the range is selected, some actions can be performed. For example, the calendar can be closed:

<button className='material-button' onClick={()=>{ setCallendarOpened(value=>!value)}}>Open / Close callendar </button>

    { callendarOpened && <NextDataPickerRange
        onChange={({ lower, upper }: { lower?: Dayjs, upper?: Dayjs }) => {
          setLowerDay(lower);
          setUpperDay(upper?.clone());
        }
      }
      daysOfWeek={['Pon', 'Wt', 'Śr', 'Czw', 'Pią', 'Sob', 'Nie']}
      namesOfMonths={
          ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
          'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'
        ]}

        onSelection={()=>{ setCallendarOpened(false)}} 
      />
      }

If you need to translate the panel of the date picker, you can pass translation strings through the appropriate props:

      <NextDatePickerRange
        onChange={({ lower, upper }: { lower?: Dayjs, upper?: Dayjs }) => {
          setLowerDay(lower);
          setUpperDay(upper);
        }}
        daysOfWeek={['Pon', 'Wt', 'Śr', 'Czw', 'Pią', 'Sob', 'Nie']}
        namesOfMonths={[
          'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
          'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'
        ]}
        
        toTheBeginning="Do początku"
        toTheEnd="Do końca"
        updateBeginning="Zmień początek"
        updateEnd="Zmień koniec"
        add="Dodaj"
        subtract="Odejmin"
      />

Some styles can be overridden by overwriting some css variables, for example:

  --primary-color-date-picker: rgba(161, 145, 255, 255);
  --sunday-color-date-picker: #ff0000;
  --begin-end-radius-datepicker: 10px; 
  --animations-speed-datepicker: 0.1s;

See page.module.css file.

To use the component, simply import it.