The DateField component in goobs-frontend is a customizable date input field that allows users to select a date or date range. It provides a user-friendly interface for date selection with various styling options.

To use the DateField component in your project, import it from the goobs-frontend package:

import { DateField } from 'goobs-frontend';

Here's a basic example of how to use the DateField component:

import React from 'react';
import { DateField } from 'goobs-frontend';

const DateFieldExample: React.FC = () => {
  return (
    <DateField
      label="Select Date"
      onChange={() => console.log('Date changed')}
    />
  );
};

export default DateFieldExample;

The DateField component accepts the following props:

• onChange: () => void (optional) - Callback function triggered when the date changes.
• backgroundcolor: string (optional) - Background color of the input field.
• outlinecolor: string (optional) - Color of the input field outline.
• fontcolor: string (optional) - Color of the text inside the input field.
• label: string (optional, default: 'Select Date Range') - Label for the date field.

Additionally, it supports all standard Material-UI TextField props.

1. Date Range Selection: Allows selection of a single date or a date range.
2. Customizable Styling: Supports custom colors for background, outline, and font.
3. Integration with react-datepicker: Uses react-datepicker for the calendar interface.
4. Accessibility: Includes proper labeling for screen readers.

You can customize the appearance of the DateField component using the provided props. Here's an example with custom styling:

import React from 'react';
import { DateField } from 'goobs-frontend';

const StyledDateFieldExample: React.FC = () => {
  return (
    <DateField
      label="Custom Styled Date"
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
      onChange={() => console.log('Date changed')}
    />
  );
};

export default StyledDateFieldExample;

The DateField component supports date range selection. When a user selects two dates, it will display the range:

import React from 'react';
import { DateField } from 'goobs-frontend';

const DateRangeExample: React.FC = () => {
  return (
    <DateField
      label="Select Date Range"
      onChange={() => console.log('Date range changed')}
    />
  );
};

export default DateRangeExample;

You can easily integrate the DateField component with form libraries like Formik or react-hook-form. Here's an example using react-hook-form:

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { DateField } from 'goobs-frontend';

const FormExample: React.FC = () => {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data: any) => {
    console.log('Form submitted with date:', data.date);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="date"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <DateField
            label="Event Date"
            onChange={field.onChange}
            value={field.value}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormExample;

The DateField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• The calendar popup is keyboard navigable.
• It supports screen readers for announcing the selected date.

To further enhance accessibility, consider providing clear instructions or context around the date field when necessary.

1. Clear Labels: Use descriptive labels to indicate the purpose of the date field.
2. Date Format: Consider specifying the expected date format if it's not obvious.
3. Validation: Implement date validation if specific date ranges or formats are required.
4. Error Handling: Provide clear error messages for invalid date inputs.
5. Localization: Consider using localized date formats and language for international users.

The DateField component is generally lightweight, but keep in mind:

• The date picker library is loaded on demand, which may cause a slight delay on first interaction.
• For forms with many date fields, consider implementing virtualization or lazy loading.

1. Date Not Updating: Ensure you're properly handling the onChange event and updating any relevant state or form values.
2. Styling Issues: Check the specificity of your CSS if custom styles are not applying correctly.
3. Timezone Discrepancies: Be aware of potential timezone issues when working with dates, especially for applications with users in different time zones.

By leveraging these features and following the best practices, you can effectively use the DateField component in your goobs-frontend projects to create user-friendly date input interfaces.