Failed to disable date range picker

[Arvin Staff]

Hi,

I tried to disable the date range picker as that in the docs. Yet it seems it doesn't work. Can you reproduce this issue?

Regards,

Arvin

P.S. Information that might be useful

the latest Syncfusion using Tailwind/Tailwind Dark + Vue.js 3 + Electron

blur, focus, open, renderDayCell, dayHeaderFormat, enabled, endDate, max, maxDays, min, name, placeholder, ref, and startDate are the properties used

[Ponmani Murugaiyan]

Hi Arvin, 

Based on your provided information, we have prepared sample in Vue 3 and with the given combination of properties and ensured in our end. But we were unable to replicate the issue. We request you to share the issue replicating sample/code snippet to investigate further in our end. Also whether you are facing any console error, please share the details. 

Regards, 

Ponmani M 

[Arvin Staff]

Hi Ponmani,

As requested, I have attached a modified demo. To run it, you can refer to the 5th note in this link.

I would like to provide you with some additional information. After some basic investigation, I have found that the property causing disabling the date range picker does not work properly in my demo is maxDays. You may refer to "src\components\SearchForm.vue:Line102". In the modified demo, I have already set "enabled" to false to demonstrate the issue better. As you can see, for Line 102, if maxDays is changed dynamically using a variable called "maxDateRangeSpan" which is a number, ":enabled = 'false'" does not work. However, if we delete "maxDateRangeSpan" but just keep "7 * 4", then it works as expected. In other words, it should be a constant, and I believe it should not be designed like this. No console error in this case.

Regards,

Arvin

Attachment: Kobe_c61cea19.zip

[Ponmani Murugaiyan]

Hi Arvin, 

Currently we are checking your reported query, we will update further details in 2 business days (March 16, 2022). 

Regards, 

Ponmani M 

[Ponmani Murugaiyan]

Hi Arvin, 

Based on your provided code snippet, you have assigned the maxDays property as string type. Be default it is number type. So we suggest you to calculate the value in a separate variable and update the number type to this property instead of directly updating.  

https://ej2.syncfusion.com/vue/documentation/api/daterangepicker/#maxdays 

https://ej2.syncfusion.com/vue/documentation/daterangepicker/range-restriction/#range-span 

:maxDays="max" 

 

max = 7 * 4 * maxDateRangeSpan; 

Regards, 

Ponmani M