0

datepicker restrict future dates

Alex 3 months ago updated 6 days ago 12

It would be good to have a control where it allows to restrict past or future dates in datepicker!

Answer

Answer

regarding Dates there is this control https://pcf.gallery/date-range-control/ maybe you can contact the author on GitHub and check if he can implement the functionality you need

Answer

regarding Dates there is this control https://pcf.gallery/date-range-control/ maybe you can contact the author on GitHub and check if he can implement the functionality you need

Hi Guys, I have been working on PCF for this idea, now I'm testing and hopefully the first release of this PCF this week. @Alex can you provide a short description of the scenario on you find useful the use this PCF. Regards

Hi @Daniel, it's a good news that you're working on a PCF solution.What I would like to have is the following:

  • Restrict past dates
  • Restrict future dates

There are times that I should prevent future dates or past dates for selection.

Example:

Date of birth: In this scenario, the future date should be disabled.


Appointment/Scheduling date: In this case past date should be disabled.

I'm currently using my own JS code to prevent past or future dates. But, it would be easier if there was any custom control for this particular examples.

Thanks,

Alex

Thanks, @Alex for providing more details. Based on that I will release shortly the first version of this PCF development and probably get in contact with @Guido to know how to share the same in the gallery.  

Regards.

+1

Hi Daniel, when your control is ready contact me on Twitter or LinkedIn and I will assist you for the publish. thanks!

Hi Guys, 

After a lot of learning, coding, and testing. Finally, I got a complete functional PCF implementing the FluentUI's DatePicker control to allow restrict to the user the selection of past/future dates based on PCF input parameters: 


b_date: is the field (Dateandtime.DateOnly) on you will use the PCF... 

i_showWeekNumbers: is for enable/disable the week numbers on the Datepicker control.

i_restrictMinimunDate: is for enable/disable the restriction of Minimum date based on the i_mindate input. 

i_restrictMaximunDate: is for enable/disable the restriction of Maximum date based on the i_maxdate input. 

i_mindate: you can set the minimum available date by setting this value: You can use Dateandtime.DateOnly to set a fixed date or to bind an entity field. Also, you can use whole numbers (negative) to define dynamically a date by adding that day number to the current date (ie: -10, the minimum date will be (today) -10 days)

i_maxdate: you can set the maximum available date by setting this value: You can use Dateandtime.DateOnly to set a fixed date or to bind an entity field. Also, you can use whole numbers (positive) to define dynamically a date by adding that day number to the current date (ie: 10, the maximum date will be (today) 10 days).

All this code is now on GitHub already. https://github.com/danielftk/PCF_Projects/tree/master/PCF_Solutions


I will contact @Guido for publishing this control into the gallery :D

@Alex 

to implement the specific scenarios you mentioned. You can set the parameters as shown below: 

Date of birth: In this scenario, the future date should be disabled.

  • b_date: *the field on you are using the PCF*
  • i_showWeekNumbers: Disable/False
  • i_restrictMinimunDate: Disables/False
  • i_restrictMaximunDate: Enabled/True
  • i_mindate: *as default*
  • i_maxdate: *Setting Whole.None* 0       **This will limit the available dates to Today + 0 Days = Today


Appointment/Scheduling date: In this case past date should be disabled.

  • b_date: *the field on you are using the PCF*
  • i_showWeekNumbers: Disabled/False
  • i_restrictMinimunDate: Enabled/True
  • i_restrictMaximunDate: Disabled/False
  • i_mindate: *Setting Whole.None* 0      **This will limit the available dates to Today + 0 Days = Today
  • i_maxdate: *as default*




Thanks Daniel for creating this plugin. I will get back to you once I tested it in my environment. One thing that I would suggest is to name this plugin correctly. Currently it's called PCF Solutions and it really doesn't make sense. Also the BoundedDatePicker can be renamed.

Thanks again for your support.

Hi @Alex,

I'm sorry 😅 Probably the names doenst make sense since I'm not a native English speaker and all my English skills are from just personal practice not from learning in an institute/course or something like that. Can you suggest better names?

Thank you for your comments.

No problem Daniel. :). Hmm, I would suggest the following:

  • Datepicker limiter
  • Datepicker editor

anything around these two items would make sense. It's up to you which one you'd like to pick for your solution.

Have a nice day,

Alex

Hi Daniel, I tested your plugin. So far it works as expected and thanks for making this feature available.

I have removed your plugin from my instance. I'll re-install it once you have updated your solution name. Thanks again.

Hi @Daniel, hope all is well with you. I still haven't re-installed your plugin since you haven't renamed the solution (zip file). Can you please update it? Thanks