Preview
Video Player
00:00
00:00
Adding a Datepicker
9:20Let’s update the “Date” field to use a datepicker.
The final improvement
that we're going to make
0:00
before we turn our attention to
adding validation to our form
0:02
is to update our form's date
field to use the datepicker.
0:06
Unfortunately, Bootstrap doesn't
provide a built-in datepicker, but
0:10
there are third party solutions available.
0:14
Let's review the steps that we'll
take in this video to add support for
0:17
datepickers to our web app.
0:20
We'll start by adding the necessary CSS
and JavaScript files to our project,
0:23
then we'll update our layout page
with references to those files and
0:28
that a script block to
initialize any datepickers that
0:32
appear on the current page.
0:35
Lastly, we'll update the form's
Date field to use a datepicker.
0:37
Let's use Google to see if we
can find a datepicker library.
0:41
I'll search for bootstrap-datepicker.
0:45
Let's check out the first result.
0:52
This is a nice looking datepicker and
it's always encouraging when a library has
0:55
documentation that seems complete,
and is readable.
1:00
Let's check out their GitHub repo by
clicking on this Edit on GitHub link.
1:04
They have over 400 watchers and
8,000 stars.
1:10
Github watchers are people who are
monitoring when changes are made to this
1:15
repo and stars are like Facebook likes.
1:20
These aren't amazing numbers,
but there are a respectable.
1:23
If we browse to the root of the repo and
click on the commits link,
1:26
we can see a list of the recent
commits to this repo.
1:32
As at the time of this recording,
1:36
the last of the changes to this
library was done on August 19th, 2016.
1:38
It looks like this library is
being actively maintained.
1:43
I could spend more time looking
at other solutions, but
1:47
this library seems to fit our needs and
looks like it's been supported.
1:50
So, let's give it a try.
1:54
Let's go back to the docs page.
1:56
If we scroll towards the bottom,
we'll find a link to an Online Demo.
2:02
This page allows you to try
different configuration options and
2:11
see how they affect the datepicker.
2:14
For our purposes, we can stick
with the default configuration.
2:16
You can download a zip file of the day
picker files by clicking the button here
2:20
at the top of the page.
2:24
Once the zip file has downloaded, open
the containing folder and unzip the file.
2:26
In the CSS folder,
there are a number of CSS files.
2:43
We're using Bootstrap 3, so
we want to use one of these files.
2:47
Our project already contains
the base Bootstrap styles, so
2:52
we can use one of these files
instead of the standalone files.
2:56
If we wanted the ability to customize,
or debug the datepicker CSS,
3:00
we'd add all four of these files.
3:05
The file with the extension
min.css is a minfied CSS file.
3:07
Minified CSS files are created by running
a CSS file through a minification process
3:13
that removes all of the unnecessary
characters from the source code,
3:19
such as spaces, new lines and comments.
3:25
This generally produces
a smaller overall file size,
3:28
which will help improve how
quickly our web app will load.
3:31
For our purposes,
the minified file is all that we need.
3:35
Browse back to the parent folder.
3:38
In the js folder,
there are just two files,
3:42
a non-minified file and minified file.
3:45
We'll use the minified file.
3:49
Let's add the files to our project.
3:51
Switch to Visual Studio and
right-click on the content folder and
3:53
select Add > Existing Item.
3:59
Browse to the Downloads,
bootstrap-datepicker-1.6.1-dist folder,
4:01
then the CSS folder and select
the bootstrap-datepicker3.min.css file and
4:08
click the Add button,
then right-click on the Scripts folder and
4:16
select Add > Existing Item.
4:22
Browse to the JS folder,
4:25
select the bootstrap-datepicker.min.js
file and click the Add button.
4:27
Now, we can update the layout page.
4:34
First, we need to add
a link to the CSS file.
4:38
Normally, you'd see a link to
the Bootstrap CSS file like this.
4:47
Link href ="~/Content /bootstrap.min.css",
4:55
then rel="stylesheet" type=tex/css,
5:04
then close the link element,
5:12
then we'd add a link to
the bootstrap-datepicker CSS file.
5:16
Link
href="~/Content/bootstrap-datepicker3.mai-
5:29
n.css" rel="stylesheet" and
5:37
type=text/css and the link element,
5:42
then the link for
our site specific CSS styles.
5:47
The order of the files is important.
5:53
First, we want to load
the Bootstrap based styles,
5:56
then any extensions to the bootstrap
styles, then our site specific styles.
5:59
But for our case,
our site.css file is actually a bundled
6:05
minified CSS file that contains
the Bootstrap based styles.
6:09
The bootstrap datepicker styles and
our site specific styles.
6:15
Given that,
we can comment out these two lines and
6:20
just leave the link to our site CSS
file like we originally had it.
6:23
Let's scroll down to the bottom of
the page and add a script include for
6:29
the Bootstrap, datepicker,
JavaScript file.
6:32
Script src for
6:37
source ~/Scripts, then select
6:40
the bootstrap-datepicker.min.js file and
close the script element.
6:46
Now that we have our styles and
scripts loaded, we can add a script
6:51
block to initialize all of
the datepickers on the current page.
6:56
To start with, we need to use jQuery to
select all of the input elements that
7:00
have the CSS class datepicker, then we
can call the datepicker function and
7:05
pass in an object literal for
the datepicker configuration.
7:11
The only configuration options that we
need to provide is the format option,
7:15
which will use to format the selected
date to a single digit month,
7:20
single digit day and a four-digit year.
7:25
By the way, if you need more help with
jQuery, remember to check the teachers
7:28
notes for content here at
Treehouse that can help you.
7:32
Now, we just need to update the add
entry form date field text box for
7:35
method call to include
the datepicker CSS class.
7:40
With that last change completed,
press F5 to run our app and
7:45
clicking on the date field
displays a datepicker.
7:50
We can change the date or switch months to
select the date and another month, nice.
7:54
Go ahead and stop the app.
8:00
If you're using GitHub,
let's commit our changes.
8:04
Enter a commit message
of added datepicker to
8:12
the date field and
click the commit all button.
8:17
Let's also sync with remote server.
8:23
Navigate to the synchronization panel and
click the push link.
8:26
Let's do a review of what
we've learned in this section.
8:32
We learned how to use a drop-down list to
restrict the list of available values and
8:36
we saw how to do the same
using radio buttons,
8:41
which are useful when there
are fewer available values.
8:44
We also saw how to use a check box for
8:48
values that are true false,
yes, no or on, off.
8:50
And lastly, we added support to
our web app for datepickers.
8:55
After completing all of these updates,
our form is now much easier to use.
8:59
I'm sure that Fitness Frog's users
will appreciate all of our hard work.
9:05
We still have one more major improvement
to make, adding validation to our form.
9:10
In the next section,
we'll work on doing exactly that.
9:15
See you then.
9:19