Show only available dates. QDatetime feature request.

[morlz]

I have an array of dates among which I need to make a choice.
The interval of dates does not suit me.

ps Thanks for a good framework!

[Hawkeye64]

Why not just use QSelect?

[morlz]

@hawkeye64 I would like to see something like this:

[mariaczi]

It is good idea. Post it on github issues

[Hawkeye64]

So, you want to pass in array of acceptable dates and then only those dates can be selected? It does sound like a good idea and I can already think of several business cases this could be used. Add the concept to github or better yet, make the adjustments yourself and add a PR.

[s.molinari]

Sounds like an extension of the min & max feature. I mean, if you have a set of dates to choose from, there would also be a min and max date in that pack too. Looking at the src code, this would also need a disabled styling for the days that are non-selectable. The iOS version would be interesting to see for sure too.

Scott

[s.molinari]

I’ve created an issue for this: https://github.com/quasarframework/quasar/issues/2372

And I’ve done the first steps for the Material theme: https://github.com/quasarframework/quasar/pull/2147

@morlz - I didn’t do the formatting you’ve suggested. I’ve used what was already available.

If the user hovers over a date not available, they get the disabled cursor. It looks better in real life.

Scott

[s.molinari]

@morlz - What would be the maximum number of dates you’d need for the selection?

I ask, because there is discussion on the PR about not limiting the number, because with a number too high, it would cause performance issues. I’ve currently added 1000 dates as the limit. Would that suffice?

Scott

[morlz]

@s-molinari
I think the best option is to do a function to check the availability of the date.
It will be called for each date shown on the screen.

checkDate(date) {
  return this.availableDates
    .includes(this.$moment(date).format('YYYY-MM-DD'))
}

<datepicker
  :check-date="checkDate"
  v-model="selectedDate"/>

[s.molinari]

That is essentially what I’ve done in the PR. The checking is done in the QDateTimePicker and the client dev must only offer the min and max date and an array of available dates.

However, if you had 20K possible available dates in availableDate (a big range between min and max) and compare that number of dates times the max 31 days showing in a month, that would delay the rendering of the calendar considerably.

There has to be a limit to the size of the array of available dates. The question is, what size is “enough”? I think 1000 is more than enough and I was asking what you thought about the size of the limit.

Scott

[morlz]

@s-molinari 300 dates are enough.

[s.molinari]

Ok. So the current 1000 should also do. We’ll see if the PR gets approved.

Scott