Power Pages uses the Bootstrap DateTimePicker library to render date and time fields on forms. This library offers a wide range of methods to customize and control the behavior of the date picker widget.

To programmatically interact with the date picker, you can use jQuery to retrieve the DateTimePicker object associated with a specific field.

Use the following code to get the instance of the date picker object.

JavaScript
$("#field_id").next().data("DateTimePicker")

Here, field_id is the schema name of the field.

Once you have the DateTimePicker object, you can easily apply various configurations. For example, to disable future dates from the date picker widget use the following code –

JavaScript
$("#field_id").next().data("DateTimePicker").maxDate(moment())

You can also set specific date ranges to select. For example, to limit the date picker to only allow selecting dates within 7 days before and after today, creating a 14-day selectable range.

JavaScript
var datePicker = $("#field_id").next().data("DateTimePicker")
datePicker.minDate(moment().subtract(7, 'days'))
datePicker.maxDate(moment().add(7, 'days'))

As you can see in the image below, only dates within 7 days before and after 16th May are selectable.

only dates within 7 days before and after today are selectable

You can refer to the official Bootstrap DateTimePicker documentation for a complete list of methods and customization options.