Here’s the scenario: You are about done with the project, and ready to put a bow on it but then your client speaks those dreaded words: “Oh, we need an attention-grabbing responsive Date Picker as well.” In this lesson, we’ll learn how to install and configure FDatepicker for Foundation.

Why do we need a 3rd party date picker?

It sounds like such a simple, trivial task. Maybe something that should be baked into the browser. Well, despite the year being 2015, the Date Picker has taken a back seat to other UI elements. Adding to this problem is the HTML5 Datepicker is not well implemented either. This usually leaves you on a wild goose chase looking for a decent 3rd party solution. There are two main reasons for this:

• The HTML5 Datepicker doesn’t work at all on most desktop browsers.
• On Chrome desktop where it is supported, the experience is not great.

Luckily for fans of ZURB Foundation, Peter Beno ( @benopeter ) has come to the rescue, by porting a popular datepicker and aptly renaming it FDatepicker, F being of course for ZURB Foundation. There are many datepicker solutions out there, but FDatepicker stands alone in that it was designed specifically for ZURB Foundation and is quickly and easily branded to nearly any style of site or app.

But what exactly is a datepicker and why would you want one? A datepicker is a specialized field that makes it easy for the user to select a specific date. You have probably seen this in the form of a small monthly calendar.

This is critical for contexts such as travel booking, event and ticket sales, but more often than not, you’re going to need at least one for your site or app.

Three things that will get your dates in order in no time flat.

1. How to install and configure Fdatepicker in a ZURB Foundation Sass based project.
2. The three most common ways to implement Fdatepicker.
3. How to customize it to match your site.

Here’s how to get FDatepicker set up quick in your ZURB Foundation (Sass) project of choice:

1. Install Fdatepicker via Bower on the command line

                            
bower install --save foundation-datepicker
                            
                            

2. Add Fdatepicker to the list of JavaScript files that are being loaded. In a new Foundation project or our example, that would be at the bottom of the index.html file. Add the following line after loading jQuery and ZURB Foundation but prior to our app.js file.

                            
<script src="bower_components/foundation-datepicker/js
/foundation-datepicker.js"></script>
                            
                            

3. Link to Foundation Icon Fonts via CDN. We link to a CDN because you will likely replace this with custom CSS and remove it before shipping. Before the end of </head> add the following line to load the fonts.

                            
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons
/3.0.0/foundation-icons.css" rel="stylesheet">
                            
                            

4. Make a local copy of the foundation-datepicker.scss file into our local ~/scss directory and rename it with an _ underscore.

                            
<link href="bower_components/foundation-datepicker/css/foundation-datepicker.scss
 scss/_foundation-datepicker.scss" rel="stylesheet">
                            
                            

Note: The _ underscore is added so that it is not automatically compiled into foundation-datepicker.css and instead into your main stylesheet.

5. Add that file as an import to the app.scss. Add the following line below the @import “foundation”;

                            
@import “foundation-datepicker”;
                            
                            

6. Create a element to act as our datepicker. Assign it the class of .fdatepicker.

                            
<label for="startDate">Fdatepicker Starting Date</label>
<input type="text" name="startDate" class="fdatepicker"
placeholder="ex. Today's Date : 7/11/2015">
                            
                            

7. Instantiate the JavaScript library. Add the following line to the end of your app.js file.

                            
$('.fdatepicker').fdatepicker();
                            
                            

Two common ways to set up your datepicker

Buttons

If you have a more complex interface, say with check-in and checkout dates where the interaction might change as part of the process, a great way to handle that is to place the date picker on a button.

Doing this with Fdatepicker is very simple. Just add your .fdatepicker class to your button element.

                            
<button class="fdatepicker">Checkin »</button>
                            
                            

Inline

Sometimes you just want to get right to the point. For this, there is the inline datepicker. To use this you just place the .fdatepicker class on any div.

                            
<div class="fdatepicker"></div>
                            
                            

Styling with Sass Variables

Much like the _settings.scss file in ZURB Foundation, Fdatepicker has a set of variables that look much more like the Foundation defaults if uncommented.

To go with ZURB Foundation defaults just uncomment this block. If you want to go further,set the appropriate sass variable to the exact color, shadow, or level of transparency that you want for your project.

---