search

WhatSock / apex

Apex 4X: The Comprehensive ARIA Development Suite
MIT License
28 stars 10 forks source link

Date picker disabled absolute date range #50

Closed impetoyt closed 1 year ago

impetoyt commented 1 year ago

I tested again with this simple code, just unzip the file (libreary files are updated to the latest one): https://easyupload.io/77pt29

1) the calendar has only this date range available minDate: new Date("2023-05-05"), maxDate: new Date("2023-05-25"), 2) in the input field calendar I digit a date outside the range above like 2021-04-20 3) I open the calendar but it appear on the current date which actually is 31 august 2023 and is completely disabled. I can't choose anymore a date from the calendar 4) I clean the input field calendar (no date) and I open the again the calendar but still on the current date which actually is 31 august 2023 and is completely disabled

Another things that is not a issue but more a UX improvment when you config the calendar with: // Optionally convert the static year field into a year selector dropdown. yearSelect: true, yearSelectMin: 1900, yearSelectMax: 2030, // Optionally convert the static month field into a month selector dropdown. monthSelect: true,

When the calendar is rendered the user have to click one time on the year or month selection and it appear the select field not opened, after this the user have to click one more time to the select field in order to open the dropdown. I don't understand why there is this strange behaviour, if the calendar is already configurated to show the two dropdowns, the user should click just one time to open the dropdown.

accdc commented 1 year ago

Hi, regarding the initial date when the calendar first opens, you will need to specify this within your config.

// Allow a date that isn't today to be set as the initial date. If unset, this value is initialised to today's date initialDate: new Date(),

You will need to set this to set a starting point for the calendar, even if you use the input field to enter a date string as an override, otherwise the calendar will not know where to compute the min max date ranges relative to the current selection within the datepicker. The initialDate will need to be set to a date between the specified min and max date range.

Regarding the year/month select fields, this was a compromise that had to be made to allow for proper keyboard support when using a screen reader. I tried setting the calendar to use a select element embedded within the datepicker without first being opened via click as it is now, but there were too many unforeseen keyboard conflicts that occurred when I did this. Though a bit odd, it is the best solution at present that doesn't cause more issues to arise when implemented.

impetoyt commented 1 year ago

I update the library and I tried to use initialDate (I also used presetDate inside beforeRender method to force the behaviour) but I had the same issue. I upload the code here: https://easyupload.io/g0havn

You can comment the beforeRender method in order to have the example 2) issue.

example 1) 1) choose a date from the calendar, you will see that presetDate works fine because the focus move on 2023-04-19 2) edit the input field with a date outside the range like 06/08/2001 3) open the calendar again and it appear the calendar on the year 2023, month september and the focus is on the day 19. The day 19 is the right one but the year and the month are wrong. Nothing is clickable, everything is disabed.

example 2) 1) please comment the beforeRender method in order to have just initialDate in the code. 2) choose a date from the calendar, you will see that initialDate works fine because the focus move on 2023-04-25 3) edit the input field with a date outside the range like 06/08/2001 4) open the calendar again and it appear the calendar on the year 2023, month september and the focus is on the day 1 which is today. Nothing is clickable, everything is disabed.

accdc commented 1 year ago

Thanks for explaining, I was able to reproduce this and have fixed it within the Datepicker module version 4.14.

You will still have to set initialDate in addition to minDate and maxDate as mentioned, however now if you attempt to get around this by editing the input field with a date outside of this range it will default back to the original initialDate.