Show only available dates on Date Picker from DB query

I’m trying to display specific dates on the date picker based on list of dates from a database table.
I have tried putting in the custom dates Data source in the App structure side, but its not working.
I have a Server Actions with a DB query listing all the available dates - But I am not sure how to have the Date picker only select those values as available dates.

@Teodor ? any idea how to achieve this?

Just add your data source in the UI?

Thanks @brad - will try that again. I did try before and it changed nothing. Will try again when at computer.

Hi @brad, I tried entering a datasource, which is from s SC, linked to the Server Action query a simple table with a list of dates. No the Calendar when it appears, has all the dates available.
I just want the dates in the table to be highlighted in the Calendar.

I didn’t’t fill in the “INVALID DATES”. would that make a difference.

Screen Shot 2022-05-28 at 9.05.08 pm

You need y to tell it which field is your date field. So select your date field for the start and end dates.

Ok, so I’ve done that now. And the calendar still doesnt hide the dates that are not listed in the DB table.

I’m not sure if this is possible?
I am not after any particular start or end dates.
All I want is to hide/display/grey out on the pop-up calendar any date that’s not in the DB date table.

Does anyone have a working example of dynamically showing which dates are available and hiding (greying out which dates are not available from a DB recordset? I can’t seem to get this to work. @Teodor any suggestions/assistance?

I’ve done a similar thing but had to rely on clicking events to make a booking rather than the date itself. The client creates slots for their customers to book on the days/times they want. The available slots would show in the calendar, when clicked it would trigger a SC call to place a booking and then update the calendar.

image

I really need it to appear on the date picker

@bpj I managed to get the INVALID DATE to appear on the date picker. it correctly crossed out the dates listed in the DB table. However I can’t do the opposite, which is display only the VALID DATES. any ideas?

Screen Shot 2022-05-31 at 9.11.38 pm

Sorry, I thought you were using the calendar component rather than the date picker - probably should have read the post title :man_facepalming:

The only thing I can think of, without some custom extension/formatter, would be to create a repeat action in the SC action to create and array of dates and flag what is/isn’t in the available dates. If you are only looking for dates in the next 30 days

  • set the date picker to only show next 30 days by setting a dynamic min date and max date
  • In the SC action you could set a value of today (NOW) and add the index of the array using dateAdd formatter, compare it with the available dates and set a boolean value to whether it appears or not

For your date picker’s invalid dates you could use the WHERE formatter to exclude the ones marked as unavailable:
expression: sc_available_dates.data.alldates.where('unavail_date',1,'==')
start/end: r_date

That way you cross out anything that doesn’t appear in the available dates (essentially showing anything in the available dates query)

thanks very much @bpj, much appreciated!! I’ll give this a go.

@cpuser did you come up with the solution?
I need same: so that in Date picker would be only “available” dates. Works find with Invalid Dates, but not with Custom Dates.

@Teodor Can we ask for your assistance, please?
Is it possible to display (to be available for selection) in Date Picker only dates that comes from server connect? I wasn’t able to achieve it with Custom Dates option, but same data worked well in Invalid Dates.

Custom dates are dates, which can be styled differently using a CSS class (using the class field), so you define a CSS class in your CSS file and then store its name in the database. This class will be applied for the custom dates, when used. There’s no such an option in the date picker to only allow specific dates. You can disable specific dates, by using the invalid dates option.

Thank you for the explanation.

Those who wants to see such option - please vote - Create Valid dates option for Date and Date range pickers

1 Like

I’ve put a solution in the feature request.

1 Like