How to add time to datepicker control in Canvas apps

Date picker is a very common control you use in Canvas apps. And sometimes, these simple controls pose us a challenge.

And once such challenge I faced is to add time component to select Hours and Minutes to the Date Picker control. Below is a date picker control on canvas app screen. As you can see, the date picker control does not allow me to select the time component.

Then how do I do it? The bad part is we need to do perform some custom stuffs. The good part is it’s fairly simple. To include the hours and minutes component, I introduce two combo boxes, one for hours and one for minutes.

I declare couple of collections to show the hours and minutes collection in the ‘On Visible’ property of the screen.

Below is the collection for Hours

ForAll(
    Sequence(25,0,1),
    Collect(
        Hours, 
        {HourText: If(ThisRecord.Value < 10, "0" & ThisRecord.Value, ThisRecord.Value), HourValue: ThisRecord.Value}
        )
    );

Below is the collection for Minutes.

orAll(Sequence(61,0,1),
    Collect(Minutes, 
             {MinuteText: If(ThisRecord.Value < 10, "0" & ThisRecord.Value, ThisRecord.Value), MinuteValue: ThisRecord.Value}
)
)

And then set the Items property of the Hour and Minute combo box controls to the corresponding collection. Below is the configuration for Hour control

Below is the configuration for Minutes control

And this is how it looks

The final step is to get the date value from combined control. And below is the code to do the same.

Set(NextDate, DatePicker1.SelectedDate + Time(Value(HourControl.Selected.HourValue), Value(MinuteControl.Selected.MinuteValue),0))

Here I am taking the resulting date time value inside a property called ‘NextDate‘.

Hope this helped!

You will also like the below posts.

Debajit Dutta
Business Solutions MVP