Time Window Picker PCF Control

This control is developed using the robust and versatile @fluentui/react library, leveraging the DatePicker and Dropdown components to provide a seamless user experience. This control can be used in the scenario where a time range selection is required along with date selection. For example to input appointment/meeting time or arrival window, it requires to select date and start time and end time.

DNB.Time.Window.Picker.Demo.mp4

Features

Date Selection

The control features a DatePicker component of @fluentui/react that allows users to easily select the date. The DatePicker provides a visual calendar interface, enabling users to navigate through months and years and pick a date with a simple click.

Time Selection

In addition to date selection, the control also facilitates the selection of the start time and end time. This is achieved through two Dropdown components, each populated with time slots (slots are configurable, default is 30 min) in a 24-hour format (configurable, it can be 12-hour format also).

How to use the control

Import the solution zip file into target dynamics environment and configure the control on the form using a date time field. Provide following properties values for the control:

Visit this link to see the detail steps on how to use this control.