The final improvement that we're going to make

before we turn our attention to adding validation to our form

is to update our form's date field to use the datepicker.

Unfortunately, Bootstrap doesn't provide a built-in datepicker, but

there are third party solutions available.

Let's review the steps that we'll take in this video to add support for

datepickers to our web app.

We'll start by adding the necessary CSS and JavaScript files to our project,

then we'll update our layout page with references to those files and

that a script block to initialize any datepickers that

appear on the current page.

Lastly, we'll update the form's Date field to use a datepicker.

Let's use Google to see if we can find a datepicker library.

I'll search for bootstrap-datepicker.

Let's check out the first result.

This is a nice looking datepicker and it's always encouraging when a library has

documentation that seems complete, and is readable.

Let's check out their GitHub repo by clicking on this Edit on GitHub link.

They have over 400 watchers and 8,000 stars.

Github watchers are people who are monitoring when changes are made to this

repo and stars are like Facebook likes.

These aren't amazing numbers, but there are a respectable.

If we browse to the root of the repo and click on the commits link,

we can see a list of the recent commits to this repo.

As at the time of this recording,

the last of the changes to this library was done on August 19th, 2016.

It looks like this library is being actively maintained.

I could spend more time looking at other solutions, but

this library seems to fit our needs and looks like it's been supported.

So, let's give it a try.

Let's go back to the docs page.

If we scroll towards the bottom, we'll find a link to an Online Demo.

This page allows you to try different configuration options and

see how they affect the datepicker.

For our purposes, we can stick with the default configuration.

You can download a zip file of the day picker files by clicking the button here

at the top of the page.

Once the zip file has downloaded, open the containing folder and unzip the file.

In the CSS folder, there are a number of CSS files.

We're using Bootstrap 3, so we want to use one of these files.

Our project already contains the base Bootstrap styles, so

we can use one of these files instead of the standalone files.

If we wanted the ability to customize, or debug the datepicker CSS,

we'd add all four of these files.

The file with the extension min.css is a minfied CSS file.

Minified CSS files are created by running a CSS file through a minification process

that removes all of the unnecessary characters from the source code,

such as spaces, new lines and comments.

This generally produces a smaller overall file size,

which will help improve how quickly our web app will load.

For our purposes, the minified file is all that we need.

Browse back to the parent folder.

In the js folder, there are just two files,

a non-minified file and minified file.

We'll use the minified file.

Let's add the files to our project.

Switch to Visual Studio and right-click on the content folder and

select Add > Existing Item.

Browse to the Downloads, bootstrap-datepicker-1.6.1-dist folder,

then the CSS folder and select the bootstrap-datepicker3.min.css file and

click the Add button, then right-click on the Scripts folder and

select Add > Existing Item.

Browse to the JS folder,

select the bootstrap-datepicker.min.js file and click the Add button.

Now, we can update the layout page.

First, we need to add a link to the CSS file.

Normally, you'd see a link to the Bootstrap CSS file like this.

Link href ="~/Content /bootstrap.min.css",

then rel="stylesheet" type=tex/css,

then close the link element,

then we'd add a link to the bootstrap-datepicker CSS file.

Link href="~/Content/bootstrap-datepicker3.mai-

n.css" rel="stylesheet" and

type=text/css and the link element,

then the link for our site specific CSS styles.

The order of the files is important.

First, we want to load the Bootstrap based styles,

then any extensions to the bootstrap styles, then our site specific styles.

But for our case, our site.css file is actually a bundled

minified CSS file that contains the Bootstrap based styles.

The bootstrap datepicker styles and our site specific styles.

Given that, we can comment out these two lines and

just leave the link to our site CSS file like we originally had it.

Let's scroll down to the bottom of the page and add a script include for

the Bootstrap, datepicker, JavaScript file.

Script src for

source ~/Scripts, then select

the bootstrap-datepicker.min.js file and close the script element.

Now that we have our styles and scripts loaded, we can add a script

block to initialize all of the datepickers on the current page.

To start with, we need to use jQuery to select all of the input elements that

have the CSS class datepicker, then we can call the datepicker function and

pass in an object literal for the datepicker configuration.

The only configuration options that we need to provide is the format option,

which will use to format the selected date to a single digit month,

single digit day and a four-digit year.

By the way, if you need more help with jQuery, remember to check the teachers

notes for content here at Treehouse that can help you.

Now, we just need to update the add entry form date field text box for

method call to include the datepicker CSS class.

With that last change completed, press F5 to run our app and

clicking on the date field displays a datepicker.

We can change the date or switch months to select the date and another month, nice.

Go ahead and stop the app.

If you're using GitHub, let's commit our changes.

Enter a commit message of added datepicker to

the date field and click the commit all button.

Let's also sync with remote server.

Navigate to the synchronization panel and click the push link.

Let's do a review of what we've learned in this section.

We learned how to use a drop-down list to restrict the list of available values and

we saw how to do the same using radio buttons,

which are useful when there are fewer available values.

We also saw how to use a check box for

values that are true false, yes, no or on, off.

And lastly, we added support to our web app for datepickers.

After completing all of these updates, our form is now much easier to use.

I'm sure that Fitness Frog's users will appreciate all of our hard work.

We still have one more major improvement to make, adding validation to our form.

In the next section, we'll work on doing exactly that.

See you then.