Post
Ask Question

Create A Custom Date Picker In SharePoint List Forms Using Power Apps

Upon customizing the SharePoint Online List / Library form using Power Apps, the default date picker that's available is bigger and not so easy to use. Also, it has a downside of having a fixed date/year instead of showing current day/year on the edit forms.

This default component cannot be modified as it is a single package;  to overcome this we can make use of the calendar-based date picker control available in the PowerApps in a customized way.

SharePoint List default date picker is simple and straightforward. But when the list form is customized using Power Apps the date picker is over-ridden by the Power Apps form date picker

Steps to utilize the calendar date picker available in the Power Apps form.

Open the SharePoint List form in Power Apps,

Create a custom date picker in SharePoint List forms using Power Apps

Add a Calendar component in a new screen,

Expand the component and select the following elements only from that,

  1. MonthDayGallery
  2. WeekdayGallery
  3. iconNextMonth
  4. iconPrevMonth
  5. LblMonthSelected
  6. iconCalendar

Copy the elements from the new screen and paste in the SharePointForm (inside the date picker field by unlock and adding the elements),

Insert a new icon “Cancel” (optional step, to toggle between visible and cancel the display of date picker).

Group the elements into one component (except 1 element iconCalendar). Delete the new screen (which will not be required, if any error is thrown in the screen will be fixed in next steps).

For removing the errors.

Delete the naming conventions.

Delete the conditions for iconNextMonth in the OnSelect property, if section,

Create a custom date picker in SharePoint List forms using Power Apps

Delete the condition for iconPrevMonth in the OnSelect property

Create a custom date picker in SharePoint List forms using Power Apps

Change the Visible property of Circle to false

Important Step: Set the variable _calendarVisible to false & _dateSelected to Blank() in the OnSelect property for the (exempted) calendar iconCalendar

Create a custom date picker in SharePoint List forms using Power Apps

Set the Visible property of the Group to _calendarVisible=false to hide the component by default

Under the MonthDayGallery component in the Title field OnSelect property add this line of code “Set(_dateSelected, DateAdd(_firstDayInView, ThisItem.Value, Days)); Select(IconCancel);” to set the variable of the selected date and close the date picker

Create a custom date picker in SharePoint List forms using Power Apps

Reverse the Visibility of the variable in the iconCancel to close the date picker

Create a custom date picker in SharePoint List forms using Power Apps

In the SharePoint form the selected date should be saved, for that the DefaultDate field property should be modified to the new value on update and restore the saved value on display/edit mode.

Create a custom date picker in SharePoint List forms using Power Apps

And on modification, the previous selected/saved date is to be reset using the following formula in the OnChange property.

Save the form and publish it to SharePoint.

Note: Design/Look & Feel of the date picker can be adjusted according to the requirements


Similar Articles