Adding 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