Date & Time Input Components

Date and Time input components provide comprehensive date selection and time input functionality built on top of react-datepicker and integrated with React Hook Form for validation and form management.

Component Overview

Core Components

WPDatepicker - Basic date picker with validation
WPDateRangePicker - Date range selection component
WPMonthPicker - Month selection component
WPBareDatePicker - Bare date picker component
CustomInput - Custom input component for date pickers
DateWrapper - Styled wrapper for date picker styling

Version Support

The components support multiple versions:

V2 - Updated components with improved styling
Legacy - Original components with basic functionality

WPDatepicker

Basic date picker component with validation and form integration.

Component Location

import { WPDatepicker } from 'components/Forms/WPDatepicker';

Props

Prop	Type	Default	Description
`name`	`string`	-	Field name for form registration
`label`	`string`	-	Input label text
`control`	`Control`	-	React Hook Form control object
`rules`	`RegisterOptions`	-	Validation rules
`defaultValue`	`Date`	-	Default date value
`isRequired`	`boolean`	`false`	Whether field is required
`isLoading`	`boolean`	`false`	Loading state
`isClearable`	`boolean`	`false`	Whether date can be cleared
`helperText`	`string`	-	Helper text to display
`popperModifiers`	`boolean`	`false`	Enable popper modifiers
`error`	`object`	-	Error object from validation

Usage Examples

Basic Date Picker

import { WPDatepicker } from 'components/Forms/WPDatepicker';
import { useForm } from 'react-hook-form';

function DateForm() {
  const { control } = useForm();

  return (
    <WPDatepicker
      name='birthDate'
      label='Birth Date'
      control={control}
      rules={{
        required: 'Birth date is required',
      }}
      isClearable
    />
  );
}

Date Picker with Custom Validation

import { WPDatepicker } from 'components/Forms/WPDatepicker';

function CustomDateForm() {
  const { control } = useForm();

  return (
    <WPDatepicker
      name='startDate'
      label='Start Date'
      control={control}
      rules={{
        required: 'Start date is required',
        validate: value => {
          const today = new Date();
          return value >= today || 'Start date must be today or later';
        },
      }}
      helperText='Select a start date for the project'
      popperModifiers
    />
  );
}

Date Picker with Default Value

import { WPDatepicker } from 'components/Forms/WPDatepicker';

function DefaultDateForm() {
  const { control } = useForm();

  return (
    <WPDatepicker
      name='dueDate'
      label='Due Date'
      control={control}
      defaultValue={new Date()}
      rules={{
        required: 'Due date is required',
      }}
    />
  );
}

WPDateRangePicker

Date range selection component for selecting start and end dates.

Component Location

import WPDateRangePicker from 'components/DatePicker/WPDatePickers';
import V2WPDateRangePicker from 'components/DatePicker/V2WPDatePickers'; // V2 version

Props

Prop	Type	Default	Description
`startDate`	`Date`	`null`	Start date value
`endDate`	`Date`	`null`	End date value
`onChange`	`function`	-	Change handler for date range
`placeholderText`	`string`	`'Filter by date'`	Placeholder text
`highlight`	`boolean`	`false`	Whether to highlight the input
`onReset`	`function`	-	Reset handler
`popperModifiers`	`boolean`	`false`	Enable popper modifiers
`minimal`	`boolean`	`false`	Use minimal styling
`minimalStyles`	`object`	`{}`	Custom minimal styles
`monthRange`	`boolean`	`false`	Show month range format

Usage Examples

Basic Date Range Picker

import WPDateRangePicker from 'components/DatePicker/WPDatePickers';
import { useState } from 'react';

function DateRangeForm() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleDateChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <WPDateRangePicker
      startDate={startDate}
      endDate={endDate}
      onChange={handleDateChange}
      placeholderText='Select date range'
    />
  );
}

Date Range Picker with Reset

import WPDateRangePicker from 'components/DatePicker/WPDatePickers';

function DateRangeWithReset() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleDateChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  const handleReset = () => {
    setStartDate(null);
    setEndDate(null);
  };

  return (
    <WPDateRangePicker
      startDate={startDate}
      endDate={endDate}
      onChange={handleDateChange}
      onReset={handleReset}
      placeholderText='Select date range'
      highlight={startDate && endDate}
    />
  );
}

Minimal Date Range Picker

import WPDateRangePicker from 'components/DatePicker/WPDatePickers';

function MinimalDateRange() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <WPDateRangePicker
      startDate={startDate}
      endDate={endDate}
      onChange={([start, end]) => {
        setStartDate(start);
        setEndDate(end);
      }}
      minimal
      minimalStyles={{
        fontSize: '12px',
        padding: '4px 8px',
      }}
    />
  );
}

WPMonthPicker

Month selection component for selecting months and years.

Component Location

import { WPMonthPicker } from 'components/DatePicker/WPDatePickers';
import { V2WPMonthPicker } from 'components/DatePicker/V2WPDatePickers'; // V2 version

Props

Prop	Type	Default	Description
`selectedDate`	`Date`	-	Selected date value
`onChange`	`function`	-	Change handler
`placeholder`	`string`	`'Select Month'`	Placeholder text
`size`	`string`	`'md'`	Input size
`inputHeight`	`string`	-	Custom input height

Usage Examples

Basic Month Picker

import { WPMonthPicker } from 'components/DatePicker/WPDatePickers';
import { useState } from 'react';

function MonthForm() {
  const [selectedMonth, setSelectedMonth] = useState(new Date());

  return (
    <WPMonthPicker
      selectedDate={selectedMonth}
      onChange={setSelectedMonth}
      placeholder='Select a month'
    />
  );
}

Month Picker with Custom Size

import { WPMonthPicker } from 'components/DatePicker/WPDatePickers';

function CustomMonthPicker() {
  const [selectedMonth, setSelectedMonth] = useState(new Date());

  return (
    <WPMonthPicker
      selectedDate={selectedMonth}
      onChange={setSelectedMonth}
      size='lg'
      inputHeight='48px'
      placeholder='Select month and year'
    />
  );
}

WPBareDatePicker

Bare date picker component for quarter and custom date selections.

Component Location

import { WPBareDatePicker } from 'components/DatePicker/WPDatePickers';
import { V2WPBareDatePicker } from 'components/DatePicker/V2WPDatePickers'; // V2 version

Props

Prop	Type	Default	Description
`selectedDate`	`Date`	-	Selected date value
`onChange`	`function`	-	Change handler
`dateFormat`	`string`	-	Custom date format
`size`	`string`	`'md'`	Input size

Usage Examples

Basic Bare Date Picker

import { WPBareDatePicker } from 'components/DatePicker/WPDatePickers';
import { useState } from 'react';

function BareDateForm() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <WPBareDatePicker
      selectedDate={selectedDate}
      onChange={setSelectedDate}
      dateFormat='yyyy-MM-dd'
    />
  );
}

Quarter Picker

import { WPBareDatePicker } from 'components/DatePicker/WPDatePickers';

function QuarterPicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <WPBareDatePicker
      selectedDate={selectedDate}
      onChange={setSelectedDate}
      dateFormat='QQQ yyyy'
      showQuarterYearPicker
    />
  );
}

CustomInput

Custom input component used internally by date pickers for consistent styling.

Component Location

import { CustomInput } from 'components/DatePicker/CustomDatePicker';
import { CustomInput } from 'components/DatePicker/V2CustomDatePicker'; // V2 version

Props

Prop	Type	Default	Description
`value`	`string`	-	Input value
`onClick`	`function`	-	Click handler
`type`	`'date' \| 'clock'`	`'date'`	Input type for icon
`placeholder`	`string`	-	Placeholder text
`highlight`	`boolean`	`false`	Whether to highlight input
`error`	`object`	-	Error object
`isClearable`	`boolean`	`false`	Whether input is clearable
`width`	`string`	`'full'`	Input width

Usage Examples

Basic Custom Input

import { CustomInput } from 'components/DatePicker/CustomDatePicker';
import DatePicker from 'react-datepicker';

function CustomDateInput() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={setSelectedDate}
      customInput={
        <CustomInput placeholder='Select date' highlight={!!selectedDate} />
      }
    />
  );
}

Time Input with Clock Icon

import { CustomInput } from 'components/DatePicker/CustomDatePicker';
import DatePicker from 'react-datepicker';

function TimeInput() {
  const [selectedTime, setSelectedTime] = useState(new Date());

  return (
    <DatePicker
      selected={selectedTime}
      onChange={setSelectedTime}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={15}
      timeCaption='Time'
      dateFormat='h:mm aa'
      customInput={<CustomInput type='clock' placeholder='Select time' />}
    />
  );
}

DateWrapper

Styled wrapper component that provides consistent styling for all date picker components.

Component Location

import { DateWrapper } from 'components/DatePicker/CustomDatePicker';
import { DateWrapper } from 'components/DatePicker/V2CustomDatePicker'; // V2 version
import { DateWrapperForDrawer } from 'components/DatePicker/CustomDatePicker'; // For modal usage

Usage Examples

Basic Date Wrapper

import { DateWrapper } from 'components/DatePicker/CustomDatePicker';
import DatePicker from 'react-datepicker';

function WrappedDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    &lt;DateWrapper&gt;
      <DatePicker
        selected={selectedDate}
        onChange={setSelectedDate}
        customInput={<CustomInput />}
      />
    </DateWrapper>
  );
}

Date Wrapper for Drawer/Modal

import { DateWrapperForDrawer } from 'components/DatePicker/CustomDatePicker';
import DatePicker from 'react-datepicker';

function ModalDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    &lt;DateWrapperForDrawer&gt;
      <DatePicker
        selected={selectedDate}
        onChange={setSelectedDate}
        customInput={<CustomInput />}
        withPortal
      />
    </DateWrapperForDrawer>
  );
}

Form Integration

With React Hook Form

import { WPDatepicker } from 'components/Forms/WPDatepicker';
import { useForm } from 'react-hook-form';

function DateForm() {
  const { control, handleSubmit, errors } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <WPDatepicker
        name='eventDate'
        label='Event Date'
        control={control}
        rules={{
          required: 'Event date is required',
          validate: value => {
            const today = new Date();
            return value >= today || 'Event date must be in the future';
          },
        }}
        helperText='Select the date for your event'
      />

      <button type='submit'>Submit</button>
    </form>
  );
}

Date Range Form

import WPDateRangePicker from 'components/DatePicker/WPDatePickers';
import { useForm } from 'react-hook-form';

function DateRangeForm() {
  const { register, handleSubmit, setValue, watch } = useForm();
  const startDate = watch('startDate');
  const endDate = watch('endDate');

  const handleDateChange = dates => {
    const [start, end] = dates;
    setValue('startDate', start);
    setValue('endDate', end);
  };

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <WPDateRangePicker
        startDate={startDate}
        endDate={endDate}
        onChange={handleDateChange}
        placeholderText='Select date range'
      />

      <button type='submit'>Submit</button>
    </form>
  );
}

Validation Patterns

Common Validation Rules

const dateValidationRules = {
  required: 'Date is required',

  // Future date validation
  futureDate: value => {
    const today = new Date();
    return value >= today || 'Date must be in the future';
  },

  // Past date validation
  pastDate: value => {
    const today = new Date();
    return value <= today || 'Date must be in the past';
  },

  // Date range validation
  dateRange: (value, { startDate }) => {
    if (!startDate) return true;
    return value >= startDate || 'End date must be after start date';
  },

  // Business days validation
  businessDay: value => {
    const day = value.getDay();
    return (day !== 0 && day !== 6) || 'Please select a weekday';
  },
};

Custom Validation Example

import { WPDatepicker } from 'components/Forms/WPDatepicker';

function ValidationExample() {
  const { control } = useForm();

  return (
    <WPDatepicker
      name='projectDeadline'
      label='Project Deadline'
      control={control}
      rules={{
        required: 'Deadline is required',
        validate: {
          futureDate: value => {
            const today = new Date();
            return value >= today || 'Deadline must be in the future';
          },
          businessDay: value => {
            const day = value.getDay();
            return (day !== 0 && day !== 6) || 'Please select a weekday';
          },
          withinRange: value => {
            const maxDate = new Date();
            maxDate.setFullYear(maxDate.getFullYear() + 2);
            return value <= maxDate || 'Deadline must be within 2 years';
          },
        },
      }}
    />
  );
}

Styling Customization

Custom Styling

import styled from '@emotion/styled';
import { DateWrapper } from 'components/DatePicker/CustomDatePicker';

const CustomDateWrapper = styled(DateWrapper)`
  .react-datepicker {
    border: 2px solid #62a446;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .react-datepicker__day--selected {
    background-color: #62a446;
    color: white;
  }

  .react-datepicker__header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
  }
`;

Theme Integration

import { useTheme } from '@chakra-ui/react';
import { DateWrapper } from 'components/DatePicker/CustomDatePicker';

function ThemedDatePicker() {
  const theme = useTheme();

  return (
    &lt;DateWrapper&gt;
      <DatePicker
        selected={selectedDate}
        onChange={setSelectedDate}
        customInput={<CustomInput highlight={!!selectedDate} />}
      />
    </DateWrapper>
  );
}

Accessibility Features

Keyboard Navigation: Full keyboard support for date selection
Screen Reader Support: Proper ARIA labels and descriptions
Focus Management: Logical focus order within calendar
Date Announcements: Screen readers announce selected dates
High Contrast: Support for high contrast themes

Performance Optimization

Lazy Loading

import { lazy, Suspense } from 'react';
import { Spinner } from '@chakra-ui/react';

const WPDatepicker = lazy(() => import('components/Forms/WPDatepicker'));

function LazyDatePicker() {
  return (
    <Suspense fallback={<Spinner />}>
      <WPDatepicker name='date' label='Date' control={control} />
    </Suspense>
  );
}

Memoization

import { memo } from 'react';
import { WPDatepicker } from 'components/Forms/WPDatepicker';

const MemoizedDatePicker = memo(WPDatepicker);

function OptimizedForm() {
  return <MemoizedDatePicker name='date' label='Date' control={control} />;
}

Best Practices

Validation: Always validate date inputs on both client and server
Accessibility: Provide clear labels and help text
Error Handling: Display clear error messages for invalid dates
Performance: Use memoization for complex date calculations
Time Zones: Consider time zone implications for date values
Format Consistency: Use consistent date formats across the application
Mobile Experience: Ensure date pickers work well on mobile devices

Migration Notes

From Legacy to V2

Styling: V2 components have updated styling and theming
Props: Some prop names may have changed
Validation: Improved validation integration
Performance: Better performance optimizations

Common Migration Steps

Update import paths to V2 components
Review and update prop usage
Test date validation and error handling
Verify styling and theming integration

WP Input Components - Text input components
Form Components - Form architecture and patterns
Selects - Selection input components
Checkbox & Radio - Choice input components

Component Overview​

Core Components​

Version Support​

WPDatepicker​

Component Location​

Props​

Usage Examples​

Basic Date Picker​

Date Picker with Custom Validation​

Date Picker with Default Value​

WPDateRangePicker​

Component Location​

Props​

Usage Examples​

Basic Date Range Picker​

Date Range Picker with Reset​

Minimal Date Range Picker​

WPMonthPicker​

Component Location​

Props​

Usage Examples​

Basic Month Picker​

Month Picker with Custom Size​

WPBareDatePicker​

Component Location​

Props​

Usage Examples​

Basic Bare Date Picker​

Quarter Picker​

CustomInput​

Component Location​

Props​

Usage Examples​

Basic Custom Input​

Time Input with Clock Icon​

DateWrapper​

Component Location​

Usage Examples​

Basic Date Wrapper​

Date Wrapper for Drawer/Modal​

Form Integration​

With React Hook Form​

Date Range Form​

Validation Patterns​

Common Validation Rules​

Custom Validation Example​

Styling Customization​

Custom Styling​

Theme Integration​

Accessibility Features​

Performance Optimization​

Lazy Loading​

Memoization​

Best Practices​

Migration Notes​

From Legacy to V2​

Common Migration Steps​

Related Components​

Component Overview

Core Components

Version Support

WPDatepicker

Component Location

Props

Usage Examples

Basic Date Picker

Date Picker with Custom Validation

Date Picker with Default Value

WPDateRangePicker

Component Location

Props

Usage Examples

Basic Date Range Picker

Date Range Picker with Reset

Minimal Date Range Picker

WPMonthPicker

Component Location

Props

Usage Examples

Basic Month Picker

Month Picker with Custom Size

WPBareDatePicker

Component Location

Props

Usage Examples

Basic Bare Date Picker

Quarter Picker

CustomInput

Component Location

Props

Usage Examples

Basic Custom Input

Time Input with Clock Icon

DateWrapper

Component Location

Usage Examples

Basic Date Wrapper

Date Wrapper for Drawer/Modal

Form Integration

With React Hook Form

Date Range Form

Validation Patterns

Common Validation Rules

Custom Validation Example

Styling Customization

Custom Styling

Theme Integration

Accessibility Features

Performance Optimization

Lazy Loading

Memoization

Best Practices

Migration Notes

From Legacy to V2

Common Migration Steps

Related Components