Handling schedules with Ionic datetime

Ionic Framework ionic-v3
1

I developing a nutritionist application. Each nutritionist has a schedule too different from one to another.

For example:

nutritionist 1:
  Thursday, from 7 am to 11 am and 4 pm to 6 pm.
  Friday, only at 8 am, 9 am and 3 pm.

nutritionist 2:
  Monday, from 9 am to 11 am and 2 pm, 3pm and 8 pm.
  Thuesday, only at 8 am, 9 am and 8 pm.

In database I have something like

"availability": [{
    "dayName": "thursday",
    "dayNum": 5,
    "hours": [7, 8, 9, 10, 11, 16, 17, 18],
}, {
    "dayName": "friday",
    "dayNum": 6,
    "hours": [8, 9, 15],
}]

And I want to use a datetime to pick an appointment with the nutritionist, but I just want show days like 14, 15, 21, 22, 28, 29 for September (thursday and friday days), if I pick one of 14, 21, 28 days, show 7, 8, 9, 10, 11, 16, 17, 18 as valid hours, if I pick 15, 22, 29 show 8, 9, 15 as valid hours.

How I tell to datetime "just show thursday and friday days?
I could create an array using (new Date()).getDay() and compare it to availability[0].dayNum. If true, push.

datetime pickers has properties like hourValues and dayValues, I think they’re useful for this case.

The problem is, how can I change hourValues “on the fly” each time an user change day in datetime:

image
In Sep 14 it shows correct hours, but if I select Sep 15 it should change hours.
If I could catch change event without close datetime I could achieve that.

Schedule is the last module to finish the project and I’m running out of time. Some help?

2

I would split this into two pickers: one for the day and the second for the hour. There is an outside chance that the situation may be similar to that with cascading selects, which would necessitate manually triggering change detection as discussed here.

3

That was the solution I was thinking about. Also, I think I’ll replace datetime for a calendar to improve user experience. Now I think it will work with cascading selects. Thank you.