DatePicker

DatePicker Component

Overview

The DatePicker component allows users to select a specific date from a calendar view. It supports marking specific dates and provides options to cancel or submit the selection.

Props

• date (string): The initially selected date in ISO string format. Default is an empty string.
• setDate (function): Callback function to update the selected date. It should accept a Date object.
• onCancel (function): Callback function executed when the cancel button is clicked.
• onSubmit (function): Callback function executed when the submit button is clicked.
• marked (string): Date to be marked on the calendar in ISO string format. Default is an empty string.
• className (string): Optional CSS class to apply custom styling. Default is an empty string.

Usage

import DatePicker from './DatePicker';

function MyComponent() {
  const [selectedDate, setSelectedDate] = useState('');
  
  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  const handleCancel = () => {
    console.log('Cancelled');
  };

  const handleSubmit = () => {
    console.log('Submitted');
  };

  return (
    <DatePicker
      date={selectedDate}
      setDate={handleDateChange}
      onCancel={handleCancel}
      onSubmit={handleSubmit}
      marked="2024-09-15"
    />
  );
}

Component Structure

• DateSelector: Component for selecting month and year.
• DayRow: Component displaying day names (MO, TU, WE, etc.).
• DateRow: Component rendering days of the month with support for marking and selecting dates.

---

RangePicker Component

Overview

The RangePicker component allows users to select a date range by choosing a start and end date from two separate calendar views. It supports filtering predefined ranges and provides options to cancel or submit the range selection.

Props

• startDate (string): The initially selected start date in ISO string format.
• setStartDate (function): Callback function to update the start date. It should accept a Date object.
• endDate (string): The initially selected end date in ISO string format.
• setEndDate (function): Callback function to update the end date. It should accept a Date object.
• onCancel (function): Callback function executed when the cancel button is clicked.
• onSubmit (function): Callback function executed when the submit button is clicked.
• marked (string): Date to be marked on the calendar in ISO string format. Default is an empty string.

Usage

import RangePicker from './RangePicker';

function MyComponent() {
  const [startDate, setStartDate] = useState('2024-09-01');
  const [endDate, setEndDate] = useState('2024-09-30');

  const handleStartDateChange = (date) => {
    setStartDate(date);
  };

  const handleEndDateChange = (date) => {
    setEndDate(date);
  };

  const handleCancel = () => {
    console.log('Cancelled');
  };

  const handleSubmit = () => {
    console.log('Submitted');
  };

  return (
    <RangePicker
      startDate={startDate}
      setStartDate={handleStartDateChange}
      endDate={endDate}
      setEndDate={handleEndDateChange}
      onCancel={handleCancel}
      onSubmit={handleSubmit}
      marked="2024-09-15"
    />
  );
}

Component Structure

• DateSelector: Component for selecting month and year in both start and end date pickers.
• DayRow: Component displaying day names (MO, TU, WE, etc.).
• RangeRow: Component rendering days of the month in range picker view, allowing selection of start and end dates.

Predefined Ranges

The RangePicker includes predefined ranges such as:

• Today
• Last 7 days
• Last 30 days
• Last 3 months
• Last 12 months
• Month to date
• Year to date
• All time

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/calendar/index.jsx