Examples

This section provides various examples of how to use the ClockPicker component in different scenarios.

Basic Usage

A simple example of the ClockPicker component with default settings.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Time String Format

Using the ClockPicker to return time in 'HH:mm' format.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

ISO String Format

Using the ClockPicker to return time in ISO 8601 format.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

DateTime String Format

Using the ClockPicker to return time in 'MM/DD/YYYY HH:mm' format.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Date Object Format

Using the ClockPicker to return time as a JavaScript Date object.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Unix Seconds Format

Using the ClockPicker to return time as Unix timestamp in seconds.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Unix Milliseconds Format

Using the ClockPicker to return time as Unix timestamp in milliseconds.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Without Action Buttons

A ClockPicker example without 'Set' and 'Clear' action buttons.

:
1
2
3
4
5
6
7
8
9
10
11
12

Selected Value:

Next Steps

Ready to implement ClockPicker in your application? Explore these resources to get started:

← Anatomy

Understand the ClockPicker’s layout and parts for easy customization.

Clockpicker Overview →

Stay up-to-date with the latest releases, features, and fixes.