And the way I will select is by specifying
the ID that I'm using from the DatePicker,
and I'm being very creative in calling it just DatePicker.
So that will be the ID that I will use for this element in the view.
And then I will say,
let current date, which is of the type date,
equal to new date.
So this way, I will set the current date to
the current date and time at this very moment when this code is run.
The reason I want to do that is that for my DatePicker,
I want to configure it such that the minimum date
that will show is the current date and the current time.
And so when the user is selecting the date and time for the reservation,
they will always select a date and time in the future,
not in the past.
It doesn't make sense for you to reserve a table in the past,
you will always be reserving table in the future.
So after the current point of time,
I will be able to allow the user to pick a value.
So I will set the current value of the DatePicker to what the current date is,
and set up the minimum values in a short while.
So I will say, DatePicker year.
I will set the year to the currentdate.GetFullYear.
So this method will give me access to the full year from the date object.
So this is the JavaScript date object.
So from there, I get the DatePicker,
and then the DatePicker month,
I will set to currentdate.getmonth
plus one,
because the month value will be set from zero to 11,
and DatePicker day I will
set equal to currentdate.getdate.
And for the DatePicker,
I will set the minDate to current date.
So that way, the minimum value that I can select from the DatePicker is the current date,
obviously avoiding selecting a date and time in the past.
And then I'll set the DatePicker maxDate equal to new date,
and then I'll set up a random date in the future, so up to 2045,
year 2045, 12th April randomly picks up.
You can configure that to be any number,
so if you want them to allow to reserve a year in advance at the most,
then based upon the current date,
you can set up the future date accordingly, the maxDate accordingly.
Let me now get the TimePicker.
So to get the TimePicker,
let me just copy the DatePicker value from here,
and then I will set up the TimePicker,
perhaps you'll find it more convenient to type in this whole thing.
But I find it more convenient to just copy the earlier code,
especially if it resembles the current line that I'm introducing,
it saves me the trouble of typing all the things all over again.
So I selected the TimePicker,
and then I will say TimePicker our current date get hours.
And for the TimePicker minute,
I will say current date get minutes.
So that way, I will configure the date and
TimePicker to the current date and current time,
so that when it is displayed in the modal,
that will be automatically set up.
Now, we will go in and create a method called submit,
which will be called when the user clicks
on a submit button in the modal dialog that I will create in a short while.
So when the user submits,
I will check if the modal is currently displaying the date and TimePicker,
or is it displaying the ListPicker.
So there are only two choices here.
If it is displaying the date and TimePicker,
I will go and get hold of the DatePicker here,
and I will say, let selected date,
DatePicker date.
And then we will select the TimePicker.
So I'm just going to copy that code from earlier,
and then select a time.
I will get the select time from TimePicker.
So note that the DatePicker will only return the date value,
and the TimePicker will return the time value.
Now, I need to combine these two in order to get
the overall time in the form of a ISO string field.
So I'll say, let reserve time is new date.
So in this, I will say,
selected date, get full year.
So this is how I can configure a date value here,
selected date, get full year, and then,
selected date,
get month selected date,
get date now.
So the date value is obtained from the DatePicker but
the time the user set it in the TimePicker.
So that's why I will say,
selected time get hours
or get full year,
and then selected time get minutes.
we can also get all the way up to milliseconds.
That doesn't make sense for us.
Time and time in the form of hours and minutes is sufficient enough for us.
So that's the value that we will get.
So this value, the reservation time is retrieved by looking at the selected date,
which I get from the DatePicker,
and the selected time which I get from the TimePicker,
and that I will construct a new date out of these values here.
So now I have the time at which I want to make the reservation.
So at this point,
then this modal is closed.
The component from which this modal is started will also supply a callback function,
which will be received in the parameters in the form of close call back as you see here.
So we'll say, close call back,
and the past, the reserve time,
and then convert it to ISO string,
because that is how we are going to be storing the information in our form.
So I will convert that reservation time that I have come up with up there,
and then convert it into an ISO string and pass it back
to the component from where the modal was opened.
So this is one way of sending in parameters to the modal,
and then receiving parameter values back from the modal to the other component.
Now, if I am using the ListPicker,
then I will say, let picker,
ListPicker and say this page get view by ID,
and then I'll say, ListPicker,
and I'll give this ListPicker an ID as guestPicker.
A bit more creative than calling it TimePicker, DatePicker, guestPicker.
And how do we retrieve the selected value from the ListPicker?
We'll say, this params close call back,
and then pass in this guest array,
and then from the guest array I will say, picker selected index.
So when you select a picker based upon the value that you selected the ListPicker,
then selected index will be used as an index into the guest array to select the value,
and then pass it back here.
So this is a more generic way of selecting the item from an array.
So for example, instead of using an array of numbers,
if you used a guest array with the strings with values from which you can select,
then you want to pass back the string that has been selected.
So this is a generic way of specifying the value that you want to pass back.
So with this, my reservation modal component,
the TS file is set up to be able to open the modal,
and then receive the information from the user,
and then pass back this information to the calling component.
Let's construct the modal here,
to construct the modal here,
I'm going to start with a stack layout.
This modal will simply display the ListPicker or the date and TimePicker, nothing else.
This doesn't have any more information to be displayed.
Fine, you can create your own layout for your modal.
So this is how you would create
custom modals if you want to use them in your application.
So we'll say, modal view style,
so this is a built in style that native script makes available,
built in CSS style.
And inside the stack layout,
I will define another stack layout,
and I will set the visibility of the stack layout to not IsDateTime.
This would set it to
either visible or collapsed.
So this way, I will show the ListPicker only if isDateTime is false.
And inside this stack layout that I've just created I'm going to create
a ListPicker
with the ID guestPicker,
recall that I used the ID in the code in order to get access to this.
And then I would say, items equal to.
And in here if you want the ListPicker to show a list of items,
then you need to supply an array of items.
So since I've created the guest array in my code,
I will use that as the items here,
and then will say, selected index equal to zero.
So by default that will be set equal to zero,
and then class is
P-15, and say ListPicker.
Now, in the second layout down below,
I will use the same stack layout what I've seen,
but the visibility now is going to be controlled by IsDateTime, not the negative value.
So if this is true, then this will set to visible,
if this is false then it will be set to collapsed.
So which means that the stack layout will be shown
only if I am trying to select the date and time.
So notice the difference between this one,
and this one here.
So the ListPicker will be shown if this data is false,
then day TimePickers will shown if isDateTime is true.
So here I will include a DatePicker.
So to include a DatePicker,
I simply say DatePicker,
and then give this an ID of DatePicker,
because that is what I used in the code.
That's it for a DatePicker, and TimePicker right below
that with the ID TimePicker.