Date fields in Portals - deep dive

Recently I encounter a post on the Power Apps forum about a need to register a change event on a date field. Before that, I never needed to do any programming interactions with date fields (except show hide them) and I was intrigued that there is more with a regular date field that meets the eye. In this post, we will have a deep dive into how Portal creates and works with date fields.

bootstrap datepicker

It is not a secret that Portal uses a lot of libraries and UI snippets to render things (like bootstrap 3, jquery etc). In the case of the date fields, there is a library as well - Bootstrap 3 Datepicker V4. This is a library to add datetime widget to the page.

Portal date field structure

Let’s take a look at the structure of the field.

Code example

Inspecting of the element reveals an interesting picture - our actual field (number 1 on the picture) is hidden and the field we see on the page (number 2) is a control created by the datepicker library. It consists of a wrapper div element that contains input and a span with icons. That’s why when you just try to add event listeners on the change of the main field or influence it somehow you will have issues.

Below you can find a couple of usage examples. To find the list of full functionality and what you can do with this library please refer to the original documentation.

How to get datetimepicker object

To work with datetimepicker you need to obtain a div wrapper of the control. Because on the portal it will always render next to the actual field we can obtain it something like this:

$("#ID_OF_YOUR_DATE_FIELD").next()

Working with events

To intercept events you again need to work on the div level. For the full list of available events see here.

One of the most important events is the dp.change event. This event fired when the date is changed + changes to a non-date (ie disabled, error in setting options, etc).

$("#ID_OF_YOUR_FIELD").next().on("dp.change", function(ev) {console.log("Dp change",ev)})

Event object will contain to important parameters:

  • date - the date the picker was changed to. Type: moment object.
  • oldDate - previous date. Type: moment object.

Setting min and max available dates

There is a pretty common scenario to set min and max date for the date picker. You can easily achieve this with minDate and maxDate functions respectively.

$('#ID_OF_YOUR_FIELD').next().data("DateTimePicker").minDate();
IMPORTANT
All options and functions of the datepicker available through data attribute - .data("DateTimePicker").OPTIONS

Example: setting min available date to the 1st of April

Min date example

Adding Today button

Another common requirement is adding today button. To add this we can use showTodayButton function.

$('#ID_OF_YOUR_FIELD').next().data("DateTimePicker").showTodayButton(true);

Today button example

Conclusion

The portal contains a lot of little hidden things and datetime field is one of those things. In this article, I highlighted the library that was used to create those fields and provide a couple of usage examples. For more examples and details on this library please visit official docs.