1

00:00:00,630 --> 00:00:04,320

So we're working away in JavaScript and things are starting to look better.



2

00:00:04,740 --> 00:00:13,020

I have my search for availability form and I can click on here and get a calendar, at least in Firefox.



3

00:00:13,230 --> 00:00:17,100

I can click on here and get a calendar for my ending date, at least in Firefox.



4

00:00:17,490 --> 00:00:23,430

And I have the ability to specify that these both need to have values in them before I can proceed.



5

00:00:23,790 --> 00:00:27,900

And then I have this button that I'm not doing anything with except toggling a color on and off.



6

00:00:28,020 --> 00:00:32,730

But I'm leaving that there because we'll be using it for different features as we move along.



7

00:00:32,760 --> 00:00:35,850

Of course, it'll disappear before we actually finish this project.



8

00:00:37,050 --> 00:00:40,170

But the problem that I have here is pretty straightforward.



9

00:00:40,320 --> 00:00:45,260

I said a while ago that this calendar picker is built into the browser.



10

00:00:45,300 --> 00:00:47,270

It's not something we have a lot of control over.



11

00:00:47,280 --> 00:00:51,210

It is rendered depending on what the browser decides it should look like.



12

00:00:51,660 --> 00:00:56,250

So if I look at this in Chrome and I click here, nothing happens.



13

00:00:56,250 --> 00:00:58,050

But if I click on the button, it does.



14

00:00:58,680 --> 00:00:59,540

That's OK.



15

00:00:59,550 --> 00:01:00,600

I could live with that.



16

00:01:00,900 --> 00:01:03,180

But what if I open it up in Safari?



17

00:01:03,450 --> 00:01:08,210

And Safari is the built in web browser that comes with every Macintosh sold these days?



18

00:01:08,640 --> 00:01:14,040

Well, in Safari, if I click in the data input, nothing happens at all and the user actually has to



19

00:01:14,040 --> 00:01:17,460

enter the data in this format, which is what I want.



20

00:01:17,520 --> 00:01:21,810

I'm not really happy about that because, you know, a lot of people won't get the date right and they'll



21

00:01:21,810 --> 00:01:26,430

just assume there's nothing available for the dates they're looking for and move on somewhere else.



22

00:01:26,760 --> 00:01:28,200

So I need a little more control.



23

00:01:28,770 --> 00:01:31,220

Unfortunately, there's lots of ways we can address this.



24

00:01:31,740 --> 00:01:37,590

What I'm going to do is use an external package built by someone else that will meet my needs.



25

00:01:37,590 --> 00:01:41,310

And I did a quick search and there's lots of different date pictures out there.



26

00:01:41,310 --> 00:01:46,040

But my my requirements were I want to date picture that's written in plain old JavaScript.



27

00:01:46,050 --> 00:01:51,570

It doesn't depend upon J Query or any other external package or framework.



28

00:01:51,720 --> 00:01:53,440

It's just written in JavaScript.



29

00:01:53,460 --> 00:01:56,670

I found this one and here's the URL right up here.



30

00:01:57,390 --> 00:02:02,370

So go to that page if you want to and let's scroll down and see what's available about it.



31

00:02:02,370 --> 00:02:08,490

So it's gives me a description here, what its features are, and those are good features, every one



32

00:02:08,490 --> 00:02:08,790

of them.



33

00:02:09,300 --> 00:02:10,740

And it has an online demo.



34

00:02:10,770 --> 00:02:11,520

Well, let's look at that.



35

00:02:12,630 --> 00:02:18,180

So I go to the online demo and I see here on the left hand side that it shows me different styles.



36

00:02:18,180 --> 00:02:19,160

I'm using bootstrap.



37

00:02:19,170 --> 00:02:22,830

So look at the bootstrap styling and I'll click in this input.



38

00:02:23,070 --> 00:02:26,610

And there is a really nice calendar and I can go forward and backwards.



39

00:02:26,880 --> 00:02:29,460

I can click here to jump to a month quickly.



40

00:02:29,460 --> 00:02:34,710

I can click again to choose a year quickly and then just click down to what I want so I can pick a day.



41

00:02:35,040 --> 00:02:38,430

And it puts the date there and it puts the date in a different format.



42

00:02:38,940 --> 00:02:44,390

But that implies to me that I'm allowed to specify what format I want the date to be in.



43

00:02:44,640 --> 00:02:45,690

So this is what I want.



44

00:02:45,720 --> 00:02:46,530

So how do I use it?



45

00:02:47,040 --> 00:02:48,810

Well, one other nice thing about this.



46

00:02:48,810 --> 00:02:54,000

This particular project is they have documentation and a lot of sites do not have documentation.



47

00:02:54,270 --> 00:02:59,010

They have great code in some cases, but don't take the time to write anything that makes it easy to



48

00:02:59,010 --> 00:02:59,370

use.



49

00:03:00,000 --> 00:03:01,950

So I'm going to look at the documentation.



50

00:03:02,520 --> 00:03:05,360

And if I scroll way down, it gives me a quick start.



51

00:03:05,850 --> 00:03:10,080

First of all, is talking about how to install it using NPM, but the one I want is at the bottom because



52

00:03:10,080 --> 00:03:13,020

I'm not going to use NPM, which is node package manager.



53

00:03:13,020 --> 00:03:14,190

I'm not using that at this point.



54

00:03:14,190 --> 00:03:15,090

I might later on.



55

00:03:15,630 --> 00:03:22,440

But right now I just want to get this work and it gives me two links from CCDs content delivery networks.



56

00:03:22,830 --> 00:03:28,110

So I'm going to copy the first one, which is access, and I know where that goes.



57

00:03:28,560 --> 00:03:35,700

So if I go to my code for this page reservation that each HTML and at the very top where my stylesheets



58

00:03:35,700 --> 00:03:40,860

are, I'll just paste that in and then I'll go back and find that documentation again.



59

00:03:41,040 --> 00:03:41,790

There it is.



60

00:03:41,790 --> 00:03:43,080

And here is the JavaScript.



61

00:03:43,410 --> 00:03:45,510

So apparently that's all I need to install it.



62

00:03:46,650 --> 00:03:54,180

And I can come back here to Goaland and go down to the JavaScript part, the very bottom where all my



63

00:03:54,180 --> 00:03:56,970

imports are a paste that.



64

00:03:56,970 --> 00:03:58,140

Is there anything else?



65

00:03:58,140 --> 00:04:02,940

If you're using Boerma bootstrap or foundation, you can use this CISSP a framework instead.



66

00:04:03,090 --> 00:04:06,030

OK, so which one is for bootstrap.



67

00:04:06,030 --> 00:04:06,420

There it is.



68

00:04:06,420 --> 00:04:07,170

Bootstrap for.



69

00:04:07,170 --> 00:04:08,080

Let's get that instead.



70

00:04:09,180 --> 00:04:15,270

So back up here and I'll just delete that and paste in this one and that should work.



71

00:04:15,870 --> 00:04:16,230

All right.



72

00:04:16,230 --> 00:04:19,050

So that gets me what's necessary to install it then.



73

00:04:19,050 --> 00:04:19,830

How do I use it.



74

00:04:20,490 --> 00:04:25,770

It says called date picker or date range picker constructor in the same way as explained above.



75

00:04:25,950 --> 00:04:27,030

And it gives an example here.



76

00:04:27,030 --> 00:04:30,330

Well, let's go above date picker.



77

00:04:30,330 --> 00:04:31,560

No, I don't want to date picture.



78

00:04:31,560 --> 00:04:36,150

I want to date range picture because if you look at the demo again, they give me an input for one date,



79

00:04:36,150 --> 00:04:40,650

but they also give me a range and that's what I want, where I have a starting date and an ending date.



80

00:04:40,860 --> 00:04:43,560

OK, let's find the documentation for date range picture.



81

00:04:44,010 --> 00:04:45,480

Got to be here somewhere in line.



82

00:04:45,480 --> 00:04:46,700

Pick the date range picture.



83

00:04:46,710 --> 00:04:47,190

Here it is.



84

00:04:47,610 --> 00:04:49,350

Div ID equals food.



85

00:04:49,740 --> 00:04:52,230

OK, let's go back here.



86

00:04:53,220 --> 00:04:58,050

And what this looks like is that this is what I'm going to use in my form.



87

00:04:58,050 --> 00:04:59,850

A div with a particular ID.



88

00:04:59,930 --> 00:05:03,920

And an input for the start and an input for the end, I don't care about that too part, but let's get



89

00:05:03,920 --> 00:05:04,600

this on our farm.



90

00:05:05,210 --> 00:05:06,200

So I find my form.



91

00:05:06,830 --> 00:05:08,260

Here it is.



92

00:05:08,270 --> 00:05:08,990

Where is it?



93

00:05:09,620 --> 00:05:10,310

There it is right there.



94

00:05:11,000 --> 00:05:17,450

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



95

00:05:17,450 --> 00:05:19,640

what I'm building with what I want it to look like.



96

00:05:20,450 --> 00:05:30,740

And I'll put another Roett div class equals form row and a closing div and then I can just paste that



97

00:05:30,740 --> 00:05:31,310

stuff in.



98

00:05:32,430 --> 00:05:37,340

OK, now since I have a form ro, I should have a column inside that row.



99

00:05:37,340 --> 00:05:43,880

Div class equals call and that call should wrap everything.



100

00:05:43,880 --> 00:05:47,060

I want to be in that column which is this.



101

00:05:47,300 --> 00:05:52,340

OK, and then I need to call that constructor.



102

00:05:52,400 --> 00:05:53,930

Let's go back to the documentation again.



103

00:05:56,130 --> 00:05:59,390

And here's the example, call the date range picture.



104

00:05:59,550 --> 00:06:06,180

OK, so I'm going to copy that and I'll go to the bottom of my JavaScript and paste that in.



105

00:06:06,720 --> 00:06:13,200

So what does this constant contact is just a keyword const, which in JavaScript is a constant Ellem,



106

00:06:13,200 --> 00:06:20,330

which is a variable name, that constant variable document element by ID foo and call range picture.



107

00:06:20,340 --> 00:06:21,460

While Foo is not a great name.



108

00:06:21,480 --> 00:06:32,250

Let's call this a reservation dates and go back up and finally place it in there, which is right here



109

00:06:32,490 --> 00:06:37,020

and change that idea to reservation dates because that's the more meaningful reservation name.



110

00:06:37,050 --> 00:06:41,130

Now let's go back to our web browser and just reload this and see what it looks like.



111

00:06:41,880 --> 00:06:42,300

All right.



112

00:06:42,570 --> 00:06:43,380

There it is.



113

00:06:45,610 --> 00:06:51,490

Looks pretty good, but these inputs don't really match these inputs, and I have that to their I don't



114

00:06:51,490 --> 00:06:52,270

really need that.



115

00:06:52,900 --> 00:06:57,430

Let's go back down here to our TML get rid of the two.



116

00:06:57,580 --> 00:07:03,940

I don't want that and see what's different about these inputs and the inputs up here that look the way



117

00:07:03,940 --> 00:07:04,760

I want them to look.



118

00:07:04,780 --> 00:07:06,840

Well, they have this class form control.



119

00:07:06,850 --> 00:07:07,770

Let's see if that's it.



120

00:07:08,110 --> 00:07:15,550

In fact, that probably is it because class form control, the form control class is part of the bootstrap



121

00:07:15,940 --> 00:07:18,010

success bootstrap success framework.



122

00:07:18,310 --> 00:07:21,280

So let's just save that and reload this.



123

00:07:22,290 --> 00:07:25,670

OK, now they look right, but there are two lines.



124

00:07:25,690 --> 00:07:26,980

Well how do I fix that.



125

00:07:27,490 --> 00:07:28,840

Well fortunately that's not too bad.



126

00:07:28,990 --> 00:07:30,010

Not too hard to fix.



127

00:07:31,000 --> 00:07:32,560

I have this div already.



128

00:07:32,890 --> 00:07:38,020

What I have is a div classical formula which gives me one room, then I have a column and an inside



129

00:07:38,020 --> 00:07:38,740

of that column.



130

00:07:39,010 --> 00:07:45,490

I need to have two more columns, which means I can just give this id the class, this div the class



131

00:07:46,000 --> 00:07:47,920

of form row



132

00:07:50,800 --> 00:08:00,190

and then wrap each of these in columns div or two class equals column and move this down here.



133

00:08:01,200 --> 00:08:01,560

Oops.



134

00:08:01,590 --> 00:08:02,050

Undo.



135

00:08:02,410 --> 00:08:09,280

I'll just take it over close to do give class equals call.



136

00:08:11,330 --> 00:08:20,900

And put that here and format everything, and that should be closer to what I want and it is all right



137

00:08:21,680 --> 00:08:24,910

now, I don't need these these descriptions that I have here anymore.



138

00:08:24,920 --> 00:08:27,350

Enter you're starting it because this is going to enter it properly.



139

00:08:27,590 --> 00:08:33,610

OK, so let's just get rid of this section entirely and see if we missed anything.



140

00:08:33,860 --> 00:08:34,760

Did we miss anything?



141

00:08:36,470 --> 00:08:37,430

Well, in fact, we did.



142

00:08:37,710 --> 00:08:39,050

We want these to be required.



143

00:08:43,490 --> 00:08:48,950

All right, last thing that doesn't look quite right, this button shouldn't be crammed right up against



144

00:08:48,950 --> 00:08:49,640

the bottom of that.



145

00:08:49,670 --> 00:08:51,130

Well, I can fix that easily enough.



146

00:08:51,170 --> 00:08:53,260

Let's just put an H.R. there.



147

00:08:53,270 --> 00:08:55,250

You haven't seen this tag at all.



148

00:08:55,250 --> 00:08:56,840

It stands for a horizontal rule.



149

00:08:57,320 --> 00:09:02,230

And unlike most HTML tags, this one doesn't have a closing tag.



150

00:09:02,240 --> 00:09:04,190

It's just one that lives by itself.



151

00:09:04,190 --> 00:09:06,560

And all it does is draw a line.



152

00:09:06,740 --> 00:09:07,250

All right.



153

00:09:07,490 --> 00:09:10,940

So now when I click this, they should both show up as required.



154

00:09:10,940 --> 00:09:11,570

They do.



155

00:09:11,570 --> 00:09:12,200

Perfect.



156

00:09:15,760 --> 00:09:21,330

Well, one thing that's a little bit ugly about this is I don't know what I'm supposed to enter in here.



157

00:09:21,340 --> 00:09:24,520

I can figure it out when I click on it, but I want to make it really clear to people.



158

00:09:24,790 --> 00:09:26,160

So I'm going to add one more thing.



159

00:09:26,830 --> 00:09:34,300

I'll put another attribute in my input called placeholder, and that's equal to whatever I want people



160

00:09:34,300 --> 00:09:40,480

to see before they put information in it, put any information in that starting arrival date or call



161

00:09:40,480 --> 00:09:42,390

it arrival date.



162

00:09:43,840 --> 00:09:48,340

And down here, I'll put departure placeholder.



163

00:09:50,710 --> 00:09:58,390

I'll just put departure and leave data there and then reload this, that looks better.



164

00:09:58,450 --> 00:09:59,560

All right, arrival.



165

00:09:59,560 --> 00:10:05,230

And then when I pick a date, whatever it may be, it changes it and the place holder goes away.



166

00:10:05,470 --> 00:10:05,920

Perfect.



167

00:10:06,190 --> 00:10:08,340

OK, so that's looking much, much better.



168

00:10:08,350 --> 00:10:09,220

It really is.



169

00:10:09,790 --> 00:10:12,730

There's still one problem that we'll get to in a bit.



170

00:10:13,300 --> 00:10:17,710

And that is here it's possible to choose a date like, say, October the 20th.



171

00:10:18,130 --> 00:10:20,970

And what I do that this is fine.



172

00:10:21,250 --> 00:10:24,240

What happens if I choose an earlier date October the 5th?



173

00:10:25,000 --> 00:10:25,510

Oh, good.



174

00:10:25,520 --> 00:10:27,040

Now they've taken care of that for us.



175

00:10:27,040 --> 00:10:34,390

It's not possible to have an arrival on one date and a departure earlier than that, which is impossible



176

00:10:34,390 --> 00:10:37,450

unless you've somehow mastered the ability to travel through time.



177

00:10:37,480 --> 00:10:39,370

OK, so I think this is looking pretty good.



178

00:10:39,910 --> 00:10:43,580

We now have a search for availability form that looks a little bit better.



179

00:10:43,630 --> 00:10:45,150

Oh, there's one more thing I wanted to do.



180

00:10:45,490 --> 00:10:46,950

I don't like this date format.



181

00:10:46,960 --> 00:10:49,560

You might like this date format, but I don't.



182

00:10:49,600 --> 00:10:55,330

Is there a way that I can specify the format of the date in a way that actually kind of makes sense



183

00:10:55,330 --> 00:10:55,650

for me?



184

00:10:55,690 --> 00:11:00,880

So let's go back here and look for options.



185

00:11:01,780 --> 00:11:06,610

Do we have any options, dates, disabled format?



186

00:11:06,620 --> 00:11:08,770

What's that format?



187

00:11:08,770 --> 00:11:11,820

That's so type string, object default mode.



188

00:11:11,830 --> 00:11:16,220

What did y y and it says you can use a date format string.



189

00:11:16,240 --> 00:11:21,610

Well I'm going to guess that it's possible for me and that's labeled what's it called format.



190

00:11:22,030 --> 00:11:29,710

When I come down here and call this where it says options, can I just say format colon and then in



191

00:11:30,040 --> 00:11:36,670

double quotes yea yea yea yea dasht month, month to date day save.



192

00:11:36,910 --> 00:11:39,070

Come back to my nice page.



193

00:11:39,490 --> 00:11:40,780

Reload this page.



194

00:11:42,640 --> 00:11:43,630

Reload this page.



195

00:11:43,630 --> 00:11:43,930

Oh yeah.



196

00:11:44,260 --> 00:11:44,590

Just.



197

00:11:45,700 --> 00:11:49,310

Do it this way, the arrival, departure, there we are.



198

00:11:49,330 --> 00:11:53,190

If I click on this now and I choose a date, that's the format, I wanted it.



199

00:11:53,470 --> 00:11:56,780

So you have a lot more control over the way that information is displayed.



200

00:11:57,070 --> 00:11:59,520

Let's test this on other browsers.



201

00:11:59,530 --> 00:12:01,660

So Safari didn't show anything before.



202

00:12:02,080 --> 00:12:03,240

Let's see how that works.



203

00:12:03,760 --> 00:12:06,340

And now I have my calendar and it works.



204

00:12:06,350 --> 00:12:09,580

Let's try Chrome reload this.



205

00:12:10,940 --> 00:12:14,050

There's my calendar and it works perfect.



206

00:12:14,260 --> 00:12:16,390

So that looks exactly the way I want it to look.



207

00:12:16,390 --> 00:12:21,820

And I think it's a lot closer to the kinds of requirements that we should be having for our site.



208

00:12:22,360 --> 00:12:22,690

All right.



209

00:12:22,690 --> 00:12:25,690

That's enough for this time and we'll pick it up in the next lecture.