So we're working away in JavaScript and things are starting to look better.
I have my search for availability form and I can click on here and get a calendar, at least in Firefox.
I can click on here and get a calendar for my ending date, at least in Firefox.
And I have the ability to specify that these both need to have values in them before I can proceed.
And then I have this button that I'm not doing anything with except toggling a color on and off.
But I'm leaving that there because we'll be using it for different features as we move along.
Of course, it'll disappear before we actually finish this project.
But the problem that I have here is pretty straightforward.
I said a while ago that this calendar picker is built into the browser.
It's not something we have a lot of control over.
It is rendered depending on what the browser decides it should look like.
So if I look at this in Chrome and I click here, nothing happens.
But if I click on the button, it does.
That's OK.
I could live with that.
But what if I open it up in Safari?
And Safari is the built in web browser that comes with every Macintosh sold these days?
Well, in Safari, if I click in the data input, nothing happens at all and the user actually has to
enter the data in this format, which is what I want.
I'm not really happy about that because, you know, a lot of people won't get the date right and they'll
just assume there's nothing available for the dates they're looking for and move on somewhere else.
So I need a little more control.
Unfortunately, there's lots of ways we can address this.
What I'm going to do is use an external package built by someone else that will meet my needs.
And I did a quick search and there's lots of different date pictures out there.
But my my requirements were I want to date picture that's written in plain old JavaScript.
It doesn't depend upon J Query or any other external package or framework.
It's just written in JavaScript.
I found this one and here's the URL right up here.
So go to that page if you want to and let's scroll down and see what's available about it.
So it's gives me a description here, what its features are, and those are good features, every one
of them.
And it has an online demo.
Well, let's look at that.
So I go to the online demo and I see here on the left hand side that it shows me different styles.
I'm using bootstrap.
So look at the bootstrap styling and I'll click in this input.
And there is a really nice calendar and I can go forward and backwards.
I can click here to jump to a month quickly.
I can click again to choose a year quickly and then just click down to what I want so I can pick a day.
And it puts the date there and it puts the date in a different format.
But that implies to me that I'm allowed to specify what format I want the date to be in.
So this is what I want.
So how do I use it?
Well, one other nice thing about this.
This particular project is they have documentation and a lot of sites do not have documentation.
They have great code in some cases, but don't take the time to write anything that makes it easy to
use.
So I'm going to look at the documentation.
And if I scroll way down, it gives me a quick start.
First of all, is talking about how to install it using NPM, but the one I want is at the bottom because
I'm not going to use NPM, which is node package manager.
I'm not using that at this point.
I might later on.
But right now I just want to get this work and it gives me two links from CCDs content delivery networks.
So I'm going to copy the first one, which is access, and I know where that goes.
So if I go to my code for this page reservation that each HTML and at the very top where my stylesheets
are, I'll just paste that in and then I'll go back and find that documentation again.
There it is.
And here is the JavaScript.
So apparently that's all I need to install it.
And I can come back here to Goaland and go down to the JavaScript part, the very bottom where all my
imports are a paste that.
Is there anything else?
If you're using Boerma bootstrap or foundation, you can use this CISSP a framework instead.
OK, so which one is for bootstrap.
There it is.
Bootstrap for.
Let's get that instead.
So back up here and I'll just delete that and paste in this one and that should work.
All right.
So that gets me what's necessary to install it then.
How do I use it.
It says called date picker or date range picker constructor in the same way as explained above.
And it gives an example here.
Well, let's go above date picker.
No, I don't want to date picture.
I want to date range picture because if you look at the demo again, they give me an input for one date,
but they also give me a range and that's what I want, where I have a starting date and an ending date.
OK, let's find the documentation for date range picture.
Got to be here somewhere in line.
Pick the date range picture.
Here it is.
Div ID equals food.
OK, let's go back here.
And what this looks like is that this is what I'm going to use in my form.
A div with a particular ID.
And an input for the start and an input for the end, I don't care about that too part, but let's get
this on our farm.
So I find my form.
Here it is.
Where is it?
There it is right there.
So right now, I have a row like this one I'm going to do is leave that stuff there just so I can compare
what I'm building with what I want it to look like.
And I'll put another Roett div class equals form row and a closing div and then I can just paste that
stuff in.
OK, now since I have a form ro, I should have a column inside that row.
Div class equals call and that call should wrap everything.
I want to be in that column which is this.
OK, and then I need to call that constructor.
Let's go back to the documentation again.
And here's the example, call the date range picture.
OK, so I'm going to copy that and I'll go to the bottom of my JavaScript and paste that in.
So what does this constant contact is just a keyword const, which in JavaScript is a constant Ellem,
which is a variable name, that constant variable document element by ID foo and call range picture.
While Foo is not a great name.
Let's call this a reservation dates and go back up and finally place it in there, which is right here
and change that idea to reservation dates because that's the more meaningful reservation name.
Now let's go back to our web browser and just reload this and see what it looks like.
All right.
There it is.
Looks pretty good, but these inputs don't really match these inputs, and I have that to their I don't
really need that.
Let's go back down here to our TML get rid of the two.
I don't want that and see what's different about these inputs and the inputs up here that look the way
I want them to look.
Well, they have this class form control.
Let's see if that's it.
In fact, that probably is it because class form control, the form control class is part of the bootstrap
success bootstrap success framework.
So let's just save that and reload this.
OK, now they look right, but there are two lines.
Well how do I fix that.
Well fortunately that's not too bad.
Not too hard to fix.
I have this div already.
What I have is a div classical formula which gives me one room, then I have a column and an inside
of that column.
I need to have two more columns, which means I can just give this id the class, this div the class
of form row
and then wrap each of these in columns div or two class equals column and move this down here.
Oops.
Undo.
I'll just take it over close to do give class equals call.
And put that here and format everything, and that should be closer to what I want and it is all right
now, I don't need these these descriptions that I have here anymore.
Enter you're starting it because this is going to enter it properly.
OK, so let's just get rid of this section entirely and see if we missed anything.
Did we miss anything?
Well, in fact, we did.
We want these to be required.
All right, last thing that doesn't look quite right, this button shouldn't be crammed right up against
the bottom of that.
Well, I can fix that easily enough.
Let's just put an H.R. there.
You haven't seen this tag at all.
It stands for a horizontal rule.
And unlike most HTML tags, this one doesn't have a closing tag.
It's just one that lives by itself.
And all it does is draw a line.
All right.
So now when I click this, they should both show up as required.
They do.
Perfect.
Well, one thing that's a little bit ugly about this is I don't know what I'm supposed to enter in here.
I can figure it out when I click on it, but I want to make it really clear to people.
So I'm going to add one more thing.
I'll put another attribute in my input called placeholder, and that's equal to whatever I want people
to see before they put information in it, put any information in that starting arrival date or call
it arrival date.
And down here, I'll put departure placeholder.
I'll just put departure and leave data there and then reload this, that looks better.
All right, arrival.
And then when I pick a date, whatever it may be, it changes it and the place holder goes away.
Perfect.
OK, so that's looking much, much better.
It really is.
There's still one problem that we'll get to in a bit.
And that is here it's possible to choose a date like, say, October the 20th.
And what I do that this is fine.
What happens if I choose an earlier date October the 5th?
Oh, good.
Now they've taken care of that for us.
It's not possible to have an arrival on one date and a departure earlier than that, which is impossible
unless you've somehow mastered the ability to travel through time.
OK, so I think this is looking pretty good.
We now have a search for availability form that looks a little bit better.
Oh, there's one more thing I wanted to do.
I don't like this date format.
You might like this date format, but I don't.
Is there a way that I can specify the format of the date in a way that actually kind of makes sense
for me?
So let's go back here and look for options.
Do we have any options, dates, disabled format?
What's that format?
That's so type string, object default mode.
What did y y and it says you can use a date format string.
Well I'm going to guess that it's possible for me and that's labeled what's it called format.
When I come down here and call this where it says options, can I just say format colon and then in
double quotes yea yea yea yea dasht month, month to date day save.
Come back to my nice page.
Reload this page.
Oh yeah.
Just.
Do it this way, the arrival, departure, there we are.
If I click on this now and I choose a date, that's the format, I wanted it.
So you have a lot more control over the way that information is displayed.
Let's test this on other browsers.
So Safari didn't show anything before.
Let's see how that works.
And now I have my calendar and it works.
Let's try Chrome reload this.
There's my calendar and it works perfect.
So that looks exactly the way I want it to look.
And I think it's a lot closer to the kinds of requirements that we should be having for our site.
All right.
That's enough for this time and we'll pick it up in the next lecture.