OLYSENSE Design System

This component leverages the React DayPicker and as a result is a React only component. There is no web component alternative.

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
import { useState } from 'react';

export const Example = () => {
  const [value, setValue] = useState<string | undefined>();

  return (
    <OdsDatePicker
      value={value}
      onDateChange={setValue}
    />
  )
}

export default Example;

The OdsDatePicker component leverages date-fns for date formatting and parsing. This means you can easily customize the date format to match your application’s requirements using the formatString property shown here and any format options supported by date-fns.

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);

  return (
    <OdsDatePicker
      formatString='MMMM do yyyy'
      value={septFirst.toISOString()}
    />
  )
}

export default Example;

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
import { useState } from 'react';
import { DateRange } from 'react-day-picker';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);
  const toDate =  new Date(today.getFullYear(), 8, 1, 12);
  const fromDate =  new Date(today.getFullYear(), 8, 1, 12);

  fromDate.setDate(septFirst.getDate() + 15);
  toDate.setDate(septFirst.getDate() + 28);

  const defaultRange: DateRange = {
    from: fromDate,
    to: toDate,
  };

  const [range, setRange] = useState<DateRange>(defaultRange);

  return (
    <OdsDatePicker
      mode='range'
      calendarProps={{
        numberOfMonths: 2
      }}
      autoClose={false}
      value={range}
      onDateRangeChange={setRange}
    />
  )
}

export default Example;

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';

export const Example = () => {
  return (
    <form noValidate>
      <OdsDatePicker
        required
        label='Label'
      />
    </form>
  )
}

export default Example;

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';

export const Example = () => {
  return (
    <form noValidate>
      <OdsDatePicker
        disabled
        required
        helpText='Sample help text'
        label='Label'
        maxlength={5}
        showCountText={true}
      />
    </form>
  )
}

export default Example;

import { OdsDatePicker } from '@ods/components/react-alt.date-picker';

export const Example = () => {
  return (
    <form noValidate>
      <OdsDatePicker
        errorText='Sample error text'
        required
        label='Label'
        maxlength={5}
        showCountText={true}
      />
    </form>
  )
}

export default Example;

Date Picker

Examples

Basic

Format

Range

Required

Disabled

Error

Importing