GuideWeb ComponentsFormDate Time Picker

Date & Time Picker

The date and time picker is an input field that allows you to select dates and time through textual input or interaction with a calendar and time options overlay.

TypeResource
DesignFigma
WebWeb Storybook
CodeGitlab

January 2025

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Usage

import { DateTimePicker } from 'bio-bind-ui';
import React from 'react';
import { DateTimePicker as DateTimePickerComponent } from 'bio-bind-ui';
 
const PreviewDateTimePicker = () => {
  return (
    <div style={{ width: 'min-content' }}>
      <DateTimePickerComponent />
    </div>
  );
};
 
export default PreviewDateTimePicker;

Examples

Date Picker With Range

A date picker with a range functionality allows users to select a start date and an end date. It is often used for filtering data based on date ranges, such as for booking systems, event scheduling, or filtering search results.

January 2025

February 2025

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Date Picker With Time Picker

A Date Picker with Time Picker component combines both date and time selection functionalities in a single UI component. This is particularly useful for applications like booking systems, scheduling apps, or any system where both a specific date and time need to be selected together.

January 2025

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

Mode (Optional)

Use mode for change the color mode of date & time picker component: light or dark

January 2025

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

January 2025

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Props

PropsRequiredDefaultTypeDescription
valuetrue-array (startDate, endDate)An array containing two dates, startDate and endDate. These represent the selected range of dates in the picker.
onChangetrue-functionA callback function that is triggered whenever the user selects a date or changes the date range. It passes the selected date range as arguments.
disabledfalsefalsebooleanA flag that determines whether the picker is disabled (true) or enabled (false). When disabled, the user cannot interact with the date picker.
maxDatefalse-DateThe latest selectable date. Any date after this will be disabled.
minDatefalse-DateThe earliest selectable date. Any date before this will be disabled.
disablePastfalsefalsebooleanA flag that disables all past dates (true) or allows selection of past dates (false).
disableFuturefalsefalsebooleanA flag that disables all future dates (true) or allows selection of future dates (false).
modefalse-dark, lightDetermines the theme of the picker, either dark or light.
typefalse-PickerTypeSpecifies the type of the date picker.
labelCancelfalseCancelstringThe label for the cancel button.
onCancelfalse-React.MouseEventHandler<HTMLButtonElement>The callback function that is triggered when the cancel button is clicked.
labelOkfalseOKstringThe label for the OK button.
onOkfalse-React.MouseEventHandler<HTMLButtonElement>The callback function that is triggered when the OK button is clicked.
footerfalse-React.ReactNodeCustom footer component or content to be displayed below the date picker.
showBorderfalsetruebooleanA flag that determines whether a border is shown around the picker (true) or not (false).
CheckboxInput
BIND © Biofarma Innovate Next-level Design .