Customizable Date Picker

DatePicker Control

One of the common requirement in Date field is to validate the dates.

Ex.

1. Date of Birth should be today or past
2. Review dates should be in future
3. Default the date field to Today's date or a month after

We used to write script onchange event on the date field to validate. So wanted to try the #fluent-UI #datepicker control to achieve this. it can be configured and updated anytime without wriitng the code.

Screenshots

Default Value:

Date Ranges:

How to Install

1. Download the latest solution from Releases folders
2. Import the latest solution in your environment

Configure the Control

Config Video: [(https://youtu.be/RGJDAumEc4c)]

1. Once the solution is installed
2. Navigate to the MDA form (Classic form designer)to configure the date field to use configurable DatePicker Control

Note: New form designer does not support adding the PCF control for date component as of 24/02/2023

3. Edit control properties, select control tab and add DatePicker control

4. Configure following properties in the control

6. Control Properties

Name	Supported Field(s)	Default	Description
Minimum Date Range	Whole Number		Set the starting range for the dates which are availalbe to select; If not specified, min date range is not applied. ex. +5 / -500; Numbers in days
Maximum Date Range	Whole Number		Set the Max range for the dates which are availalbe to select; If not specified, max date range is not applied. ex. +5 / -500; Numbers in days
Enable Default	Whole Number	false	Set the value to 0 for disable and 1 for enable default value
Default Date	Whole Number	0	No value specified, today's date will be applied as default value Numbers +/- days will be applied from +/- todays date

Examples

1. Configure Date of Birth to accept dates upto Today / Yesterday
   • Minimum Date (No Value)
   • Maximum Date 0 - allowed upto today, -1 - upto Yesterday
2. Date(s) should only in next three months
   • Minimum Date - 0
   • Maximum Date - 90
3. Set Default Value to Today
   • Enable Default - 1
   • Default Date - 0
4. Set Default Value to 1 month from now
   • Enable Default - 1
   • Default Date - 30