Date fields in power pages

If you want to work with date controls in Dynamics Portals (also known as power pages), you can use the Liquid templating language to display and format dates. For date fields in portals.

Changing the date format in Dynamics Portals

Step 1: Navigate to Portal Management in the dashboard.

Step 2: Click on Site Settings.

In site settings, check “DateTime/DateFormat” in the Name field. If a record is found, then open the record and edit the Value field to the desired date format string.

i.e. dd/MM/yyyy

If no record is found:

Click +New to create a new record. Under the General tab, enter:
Name: DateTime/DateFormat
Website: Your Portal Name
Value: enter date format, i.e., dd/MM/yyyy

Step3: Click on save

Set and Get date filed values

GET/SET field values using JavaScript in Dynamics CRM Portals/Power Portals/Power Pages – Siddaka

Restrict Past dates and feature dates in power pages

To restrict past and future dates on Power Portals (Dynamics 365 Portals), you would typically need to use custom JavaScript code to implement this functionality.

Past date:

$(document).ready(function() {
   $("#new_date")  // input control (Field Id)
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   .minDate(moment()); // force the past, and In Portals moment JS Library is included.
});

Feature Date

$(document).ready(function() {
   $("#new_date")  // input control(Field Id)
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   .maxDate(moment()); // force the past, and In Portal's moment JS Library is included.
});

How to trigger onchange Event of DatePicker using Jquery in Power Portals

$("#new_date").next().on("dp.change", function(event) {
console.log("Date picker change event",event);
console.log(event.date);
});

$('#new_date').next().data("DateTimePicker").disabledDates([moment("08/28/2023"),moment("08/30/2023")]); // Pass dates into array

How to Disable Weekends in Datepicker using Jquery in Power Portals

If you want to disable weekends (Saturday and Sunday) in a date picker using jQuery in Power Portals, you can follow these steps:

//Day of the week start. 0 (Sunday) to 6 (Saturday)
$('#new_date').next().data("DateTimePicker").daysOfWeekDisabled([0,6]);

It isn’t a secret that Portal uses a lot of libraries and UI bits to render effects( like Bootstrap 3, jquery, moment js etc). In the case of the date fields, there’s a library as well- Bootstrap 3 Datepicker V4. For more options for the date picker, refer to the below link.

getdatepicker.com/4/