Enter Time directly instead of drop-downs

Have you ever wanted to throw away the drop-downs that Power Apps supplies for time fields and simply have the user enter a valid time. For this you would also want to display the time currently stored in the data source and do both in an hh:mm format.

It is not as difficult or complex as you may think and can also all be done within a SubmitForm() action using the Update property of the data card. Here are the steps required.

Unlock the card and delete the two drop-downs for hour and minute and the separator and add a Text Control (I will call it TxtTime1 here and will use DateValue1 as the Date Picker name).  Set the DelayOutput of this Text Control to true.

You will get some errors – change the Y of the ErrorMessage control to

Parent.Height-Self.Height

The Update of the Data Card

With(
   {
      wHour: 
      Value(
         Left(
            TxtTime1.Text,
            2
         )
      ),
      wMinute: 
      Value(
         Right(
            TxtTime1.Text,
            2
         )
      )
   },
   DateValue1.SelectedDate + 
   Time(
      wHour,
      wMinute,
      0
   )
)

The OnSelect of the Text Control – also put this on OnVisible of the screen and at the END of any Save code after SubmitForm()

UpdateContext({varTime1: Blank()})

The Default of the Text Control

If(
   !IsBlank(varTime1),
   varTime1,
   Text(
      Hour(Parent.Default),
      "00"
   ) & ":" & 
   Text(
      Minute(Parent.Default),
      "00"
   )
)

 The OnChange of the Text Control

With(
   {
      wHour: 
      RoundDown(
         Value(Self.Text) / 100,
         0
      ),
      wMinute: 
      Value(
         Right(
            Self.Text,
            2
         )
      )
   },
   If(
      wHour > 23 || wMinute > 59,
      Notify(
         "Invalid Time",
         Error,
         4000
      ),
      UpdateContext(
         {
            varTime1: 
            Text(
               wHour,
               "00"
            ) & ":" & 
            Text(
               wMinute,
               "00"
            )
         }
      )
   )
);
Reset(Self)

and now it should all work both displaying the current time and formatting any valid input as hh:mm