Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: DateTimepicker `disablePast` issues

luc122c priority asked 1 year ago


Hi, I'm having some issues with the disablePast attribute of the DateTimepicker component.

<MDBDateTimepicker
  label="Select start date/time"
  v-model="start"
  required
  inputToggle
  disablePast
/>

Expected behavior

Adding the disablePast attribute would disable any Date/Time in the past. For example:

  • Current Date/Time: 22/06/2023 15:00
  • Datepicker should disabled dates before 22/06/2023
  • Timepicker should disable times before 3pm ONLY if the selected dateis 22/06/2023

Actual behavior

disablePast is passed to the sub-components individually, leading to unexpected behaviour. For example:

  • Current Date/Time: 22/06/2023 15:00
  • Datepicker disables dates before 22/06/2023
  • Timepicker incorrectly disables times before 3pm, regardless of date!

Additional issue

Furthermore, I tried to work around this by omitting the disablePast attribute and use the datepicker prop to pass disablepast: true directly to the Datepicker component only, however it appears that in the source code, the disablePast and disableFuture props are passed directly into the sub-components, and because the props have defaults, these override any value set in the datepicker prop.

<MDBDateTimepicker
  label="Select start date/time"
  v-model="start"
  required
  inputToggle
  :datepicker="{
    disablePast: true,
  }"
/>

Snippet

https://mdbootstrap.com/snippets/vue/luc122c/5393172

Video

https://youtu.be/34wCJpsB0Xk


Bartosz Cylwik staff answered 1 year ago


Hi! I cannot recreate this issue. I tried changing the time to 3:00 PM in our code to see the issue but it seems to be working for me. Could you describe what is the timepicker showing in your app? Does it disable the wrong hours, Am/Pm format, doesn't let you pick a time? Is it not working at all or just the PM times?

The disablePast attribute in DateTimepicker is passing the prop further to Timepicker and Datepicker so it shouldn't be an issue.

Best Regards!


luc122c priority commented 1 year ago

Hi, I have created a snippet here: https://mdbootstrap.com/snippets/vue/luc122c/5393172 And uploaded a video of the issue here: https://youtu.be/34wCJpsB0Xk


Bartosz Cylwik staff commented 1 year ago

Oh now I see. Thank you for reporting this and making effort to show this issue. I have added this to our list. Best Regards!


luc122c priority commented 1 year ago

Hi, looking at the changelog for v4.1.0, it seems this has been fixed. I'll upgrade and try it. Thank you!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: Mac Studio
  • Browser: Chrome
  • OS: macOS 13.4
  • Provided sample code: Yes
  • Provided link: Yes