Date Range

/**
 * Date Range Field Demo - Interactive examples of date range fields
 */

import { Form, FormBuilder } from '@saastro/forms';

import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('daterange-demo')
  .layout('manual')
  .columns(12)
  .addField('stayDates', (f) =>
    f
      .type('daterange')
      .label('Check-in / Check-out')
      .placeholder('Select your stay dates')
      .helperText('When would you like to stay?')
      .required('Please select your stay dates')
      .columns({ default: 12, md: 6 }),
  )
  .addField('reportPeriod', (f) =>
    f
      .type('daterange')
      .label('Report Period')
      .placeholder('Select date range')
      .helperText('Choose the period for your report')
      .optional()
      .columns({ default: 12, md: 6 }),
  )
  .addStep('main', ['stayDates', 'reportPeriod'])
  .build();

export default function DaterangeDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
    alert('Form submitted! Check console for data.');
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-4" />
      </FormProvider>
    </TooltipProvider>
  );
}

Overview

The date range field allows users to select a start and end date using a calendar interface. It’s ideal for booking systems, date filters, and any scenario requiring a date period.

Usage

Basic Date Range

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('booking')
  .addField('stayDates', (f) =>
    f
      .type('daterange')
      .label('Check-in / Check-out')
      .placeholder('Select dates')
      .required('Please select your stay dates'),
  )
  .addStep('main', ['stayDates'])
  .build();

With Default Range

const nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);

.addField('reportPeriod', (f) =>
  f.type('daterange')
    .label('Report Period')
    .value({ from: new Date(), to: nextWeek })
    .required()
)

JSON Configuration

{
  "type": "daterange",
  "label": "Check-in / Check-out",
  "placeholder": "Select dates",
  "schema": { "required": true }
}

Props

Value Format

The date range field produces a value object:

{
  from: Date,  // Start date
  to: Date     // End date
}

Validation

Required Range

.addField('vacation', (f) =>
  f.type('daterange')
    .label('Vacation Period')
    .required('Please select your vacation dates')
)

Use Cases

1. Hotel booking: Check-in / check-out dates
2. Event scheduling: Event start and end
3. Report filtering: Date range for data
4. Leave requests: Vacation periods

Styling

Custom Classes

.addField('stayDates', (f) =>
  f.type('daterange')
    .label('Check-in / Check-out')
    .required()
    .classNames({
      wrapper: 'bg-muted/30 p-4 rounded-lg',
      input: 'border-2 border-primary/20',
      label: 'text-lg font-semibold',
      error: 'text-destructive text-sm',
    })
)

Responsive Layout

.addField('reportPeriod', (f) =>
  f.type('daterange')
    .label('Report Period')
    .columns({ default: 12, md: 8 })
)

JSON Styling

{
  "type": "daterange",
  "label": "Check-in / Check-out",
  "wrapper_className": "bg-muted/30 p-4 rounded-lg",
  "input_className": "border-2 border-primary/20",
  "label_className": "text-lg font-semibold",
  "columns": { "default": 12, "md": 8 }
}

Related Fields

• Date - Single date selection

Accessibility

• Built on react-day-picker
• Keyboard navigation
• Range selection feedback
• Screen reader support