Time Window Picker Control

In addition to date selection, the control also facilitates the selection of the start time and end time. 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. 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). Users can select the desired start and end times from these dropdowns.

Control Demo

Steps to Use the Control

1. Import the control solution zip file into target environment. Solution file can be downloaded from this link: Control Solution File.
2. Configure the control on the form using a date time field. Provide following properties values for the control. Here, I have used arrivalwindowstarttime field to add the pcf control on the form. 
   
3. Next step will be to apply the JavaScript code to show the error message whenever user select wrong end time. The pcf control has one output property 'Is Time Window Valid' of type boolean which can be used to show the error message. Register the following onLoad method on form onload event as shown below.
   

   

   
   
4. Save and publish the form.
5. Open the entity page where control is configured, control should be visible on the page. If not, try to hard refresh the page.

JavaScript Code

var DNB = DNB || {};

DNB.Case = {

    Fields: {

        ArrivalWindowStartTime: 'dnb_arrivalwindowstarttime',

        ArrivalWindowEndTime: 'dnb_arrivalwindowendtime'

    },

    onLoad: function (executionContext) {

        var formContext = executionContext.getFormContext();

        var ctrlArrivalWindow = formContext.getControl(DNB.Case.Fields.ArrivalWindowStartTime);

        ctrlArrivalWindow.addOnOutputChange(DNB.Case.onChangeEndTime);

    },

    onChangeEndTime: function (executionContext) {

        var formContext = executionContext.getFormContext();

        var ctrlArrivalWindow = formContext.getControl(DNB.Case.Fields.ArrivalWindowStartTime);

        var validationResult = ctrlArrivalWindow.getOutputs();

        var uniqueId = 'dnb_timewindowvalidation';

        if (validationResult &&

            validationResult[`${DNB.Case.Fields.ArrivalWindowStartTime}.fieldControl.isTimeWindowValid`] &&

            validationResult[`${DNB.Case.Fields.ArrivalWindowStartTime}.fieldControl.isTimeWindowValid`].value === false) {

            ctrlArrivalWindow.setNotification('You must specify an end time that happens after the start time.', uniqueId);

        }

        else {

            ctrlArrivalWindow.clearNotification(uniqueId);

        }

    }

}