Phoenix Datepicker to only show available dates

Question

I am working on a simple booking system using the Phoenix framework. At the moment, I have a route for new bookings, displaying a date picker which takes the values from a "booking" model with the following attributes:

:time, Ecto.DateTime
:description, :string
belongs_to :user, Test.User

When I head to "bookings/new", my form is correctly displayed and I can pick whatever date I want. However, I am now trying to figure out how to remove unavailable dates from the picker.

As far as I can see, the form is taking the values from ecto's DateTime primitive type, however coming from an OOP background I cannot figure out what resource I need to update in order to remove unavailable dates. Do I have to create a custom type?

Thanks in advance

Answer 1

You can't block arbitrary dates in the default DateTime picker. You can restrict the range (e.g. limit the years to 1234 to 1243 or months to January to June), but since they're independent <select> inputs, you can't hide specific combinations. Two ways to solve this that I can think of are:

1. Do the validation on the server. You can use AJAX to do the validation as soon as the user selects, without a page refresh, if you want.

2. Use JavaScript to restrict the range, either blocking selecting a taken date using custom JS, or use an existing, full fledged DatePicker / Calendar library.