cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

how to select a week in datepicker

Hi,

 

I am building an app that would like to include a datepicker. The condition is the datepicker must be selected in a range of 7 days instead of an individual day.

Is there a solution that the datepicker can be selected in a range of 7 days (a week)? for example, select 17 - 23 May at once instead of 19 May

 

3 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Community Support
Community Support

Hi @pollyzzz ,

Do you want a calendar to select the whole week?

The solution that he mentioned @G99 is ok, but you need to use two calendars. And the app's appearance is not what you want.

I figure out a better one.

Firstly, please notice that the system date picker control is not supported to select multiple dates.

You need to customize a calendar.

Here's my solution:

1)import this custom calendar component:

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Custom-Calendar-to-Restrict-range...

2)inside the component:

set Title2_1's OnSelect:

Set(_dateSelected, DateAdd(_firstDayInView, ThisItem.Value, Days));Set(startdate, DateAdd(DateAdd(_firstDayInView, ThisItem.Value, Days),-Weekday(DateAdd(_firstDayInView, ThisItem.Value, Days)))+1);Set(enddate, DateAdd(DateAdd(_firstDayInView, ThisItem.Value, Days),-Weekday(DateAdd(_firstDayInView, ThisItem.Value, Days))+7))

set Subcircle1_1's Visible:

And(DateAdd(_firstDayInView, ThisItem.Value) >= startdate,DateAdd(_firstDayInView, ThisItem.Value) <= enddate, Title2_1.Visible)

520.PNG

 

Then if you select one day, you will select the whole week.

520.gif

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

Hi @pollyzzz ,

Sorry that It seems that I gave you the wrong component.

Please import this component.(see the attachment)

Title2_1  and Subcircle1_1 is in MonthDayGallery.

 

 

Best regards,

 

 

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

Hi @pollyzzz ,

Do you want to filter items based one the week that you select?

Could you tell me

1)what is your data source?
2)what is the field's data type that record date in your data source?

I assume that the field is date type.

If so, you need to do this:
1)create two custom properties inside your component.

5202.PNG

 

5203.PNG

 2)inside the component

set date1: startdate

date2: enddate

5204.PNG

 

3)inside app, you could use formula like this to filter:

Filter(datasource,datefield>=CustomCalendar_1.date1,datefield<=CustomCalendar_1.date2)

 

 

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

8 REPLIES 8
Highlighted
Post Prodigy
Post Prodigy

@pollyzzz 

Please see response with a similar question:

https://powerusers.microsoft.com/t5/Building-Power-Apps/Efficient-user-friendly-way-to-select-multip...

 

Appears there isn't currently an option to meet your requirements but a workaround is provided 

Highlighted
Community Support
Community Support

Hi @pollyzzz ,

Do you want a calendar to select the whole week?

The solution that he mentioned @G99 is ok, but you need to use two calendars. And the app's appearance is not what you want.

I figure out a better one.

Firstly, please notice that the system date picker control is not supported to select multiple dates.

You need to customize a calendar.

Here's my solution:

1)import this custom calendar component:

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Custom-Calendar-to-Restrict-range...

2)inside the component:

set Title2_1's OnSelect:

Set(_dateSelected, DateAdd(_firstDayInView, ThisItem.Value, Days));Set(startdate, DateAdd(DateAdd(_firstDayInView, ThisItem.Value, Days),-Weekday(DateAdd(_firstDayInView, ThisItem.Value, Days)))+1);Set(enddate, DateAdd(DateAdd(_firstDayInView, ThisItem.Value, Days),-Weekday(DateAdd(_firstDayInView, ThisItem.Value, Days))+7))

set Subcircle1_1's Visible:

And(DateAdd(_firstDayInView, ThisItem.Value) >= startdate,DateAdd(_firstDayInView, ThisItem.Value) <= enddate, Title2_1.Visible)

520.PNG

 

Then if you select one day, you will select the whole week.

520.gif

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

After I downloaded the component and imported it to my PowerApps, I cannot find Title2_1 & Subcircle1_1 and my component looks different from you. 😞 

 

Highlighted

After I downloaded the component and imported it to my PowerApps, I cannot find Title2_1 & Subcircle1_1 and my component looks different from you. 😞

 

Screen Shot 2020-05-20 at 1.43.45 PM.png

Screen Shot 2020-05-20 at 1.43.51 PM.png

Highlighted

Hi @pollyzzz ,

Sorry that It seems that I gave you the wrong component.

Please import this component.(see the attachment)

Title2_1  and Subcircle1_1 is in MonthDayGallery.

 

 

Best regards,

 

 

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

Thank you very much!

Do you know how I can filter the data records based on the week I selected? Will a button help?

Highlighted

Hi @pollyzzz ,

Do you want to filter items based one the week that you select?

Could you tell me

1)what is your data source?
2)what is the field's data type that record date in your data source?

I assume that the field is date type.

If so, you need to do this:
1)create two custom properties inside your component.

5202.PNG

 

5203.PNG

 2)inside the component

set date1: startdate

date2: enddate

5204.PNG

 

3)inside app, you could use formula like this to filter:

Filter(datasource,datefield>=CustomCalendar_1.date1,datefield<=CustomCalendar_1.date2)

 

 

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

do you know how to change the color of the blue circles by chance?

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (8,137)