Components

Filter Date

Storybook

The Filter Date component allows users to filter and select dates intuitively in web and mobile applications.

Imports

The first alternative is recommended since they can reduce the application bundle

1import FilterDate from 'dd360-ds/FilterDate'

1import { FilterDate } from 'dd360-ds'

Usage

The prop onApply of type function is mandatory, this function returns an object containing the month and year values selected by the user.

The code snippet below shows how to use the FilterDate component:

1import { FilterDate } from 'dd360-ds''
2
3<FilterDate
4  onApply={() => undefined}
5/>
6

Customization

• title: The title displayed when the component is opened.
• textApplyBtn: The text displayed on the apply button.
• textResetBtn: The text displayed on the reset button.
• language: The language used for the component. Accepts 'en' (English) or 'es' (Spanish) as values.

Example customization:

The code snippet below shows how to customize the FilterDate component:

1import { FilterDate } from 'dd360-ds'
2
3<FilterDate
4  onApply={() => undefined}
5  title="Select date"
6  textApplyBtn="Apply date"
7  textResetBtn="Reset date"
8  language="en"
9/>
10

Support Server Side Rendering

For applications that use server-side rendering, you can ensure that the FilterDate component is fully rendered before displaying it by using the domLoaded state variable. This helps avoid any issues that may arise due to server-side rendering.

Example usage:

1import { FilterDate } from 'dd360-ds'
2
3const FilterComponent = () => {
4  const [domLoaded, setDomLoaded] = useState<boolean>(false)
5
6  useEffect(() => {
7    setDomLoaded(true)
8  }, [])
9
10  return (
11    <>
12      {domLoaded && (
13         <FilterDate
14            onApply={() => undefined}
15          />
16      )}
17    </>
18  )
19}
20
21export default FilterComponent
22 

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.