{"id":16506,"date":"2017-03-13T16:15:13","date_gmt":"2017-03-13T14:15:13","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=16506"},"modified":"2018-01-08T13:13:14","modified_gmt":"2018-01-08T11:13:14","slug":"bootstrap-datepicker-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-datepicker-example\/","title":{"rendered":"Bootstrap Datepicker Example"},"content":{"rendered":"

In today’s article, we will be looking into how to get started quickly with Bootstrap’s datepicker, and explore a few of the different options, methods and events that are available. To follow this example, all you need is a text editor; I will be using Notepad++.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]
\n <\/p>\n

1. Introduction<\/h2>\n

1.1. Date what?<\/h3>\n

If you’re building a website that at some stage, needs to allow the user to select one or several dates, then you’ll need to use what’s called a datepicker. A datepicker, to simply put it, is a nice little calendar widget, which allows the user to browse a calendar and select one or several dates. Today, we’ll be looking into Bootstrap’s implementation of the datepicker.
\nUsing Bootstrap’s date picker isn’t as straightforward as using other Bootstrap components, because it’s not included in the core library. You’ll need to include additional dependencies to be able to use it. Besides that, it’s pretty much the same as all the other components.<\/p>\n

1.2. Who should read this article?<\/h3>\n

The goal of this article is to get developers or architects started on Bootstrap’s datepicker quickly. Most other datepicker references on the web – including the documentation – are complete, but hard to get into. This article aims to get you started fast and easily, for the scope of a POC or a simple requirements application.<\/p>\n

1.3. Before we get started…<\/h3>\n

A few things I like to make clear in my articles:
\n– In Bootstrap projects, I prefer to use data-* attributes rather than use JavaScript. When creating a UI in HTML, it usually makes more sense to…uh…not use JavaScript. So I’m going to be using Bootstrap’s data-* attributes on my HTML tags; just know that it can be done in JavaScript as well.
\n– I always cut down my code examples down to the absolute bare minimum, to remove any clutter and make my example as clear and concise as possible. The goal in my articles isn’t to create beautiful web pages, it’s to demonstrate how a given feature is used.
\nNuff said. Let’s get our hands dirty.<\/p>\n

2. Getting started<\/h2>\n

Let’s start by setting up the dependencies we need. You’ll notice we’ve included all the libraries required for a standard Bootstrap project (Bootstrap JS, CSS and jQuery), as well as two new ones: Bootstrap datepicker JS and CSS.<\/p>\n

Datepicker setup.html<\/em><\/span><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<!-- Bootstrap JS and CSS + jQuery -->\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"><\/link> \r\n\t<script src=\"http:\/\/code.jquery.com\/jquery-3.1.1.min.js\"><\/script>\r\n\t<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n\t\r\n\t<!-- Bootstrap datepicker JS and CSS -->\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/js\/bootstrap-datepicker.js\"><\/script>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/css\/bootstrap-datepicker.css\"><\/link>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now, let’s create a datepicker. Unlike most Bootstrap components (and this is important!), you’ll need to explicitly instantiate the datepicker yourself. This can be done in two ways:
\n– Either you can add a data-provide<\/b> attribute to the HTML tag you wish to instantiate a datepicker on, associated to the value datepicker<\/b>
\n– Or you can use JavaScript to instantiate that same tag using the datepicker()<\/b> method.
\nSee examples below.<\/p>\n
Instantiate with data attributes.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Instantiate a datepicker with data-provide attribute<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"><\/link> \r\n\t<script src=\"http:\/\/code.jquery.com\/jquery-3.1.1.min.js\"><\/script>\r\n\t<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n\t\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/js\/bootstrap-datepicker.js\"><\/script>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/css\/bootstrap-datepicker.css\"><\/link>\r\n<\/head>\r\n<body>\r\n\t<input type=\"text\" data-provide=\"datepicker\" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Instantiate with JavaScript.html<\/em><\/span><\/p>\n
<!DOCTYPE html<\r\n<html<\r\n<head<\r\n\t<title<Instantiate a datepicker with JavaScript<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<>\/link> \r\n\t<script src=\"http:\/\/code.jquery.com\/jquery-3.1.1.min.js\"<<\/script>\r\n\t<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n\t\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/js\/bootstrap-datepicker.js\"><\/script>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.6.4\/css\/bootstrap-datepicker.css\"><\/link>\r\n\t\r\n\t<script>\r\n\t\tfunction instantiateMyDatePicker() {\r\n\t\t\t$('#myDatePickerId').datepicker();\r\n\t\t}\r\n\t<\/script>\r\n\t\r\n<\/head>\r\n<body onload=\"instantiateMyDatePicker()\">\r\n\t<input type=\"text\" id=\"myDatePickerId\" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
In both cases, we result with an input which displays a datepicker when it receives focus.<\/p>\n
\"\"<\/a>

 Fig. 1: Instantiation<\/figcaption><\/figure>\n
3. Different kinds of markups<\/h2>\n
You can instantiate a datepicker on just about any HTML tag, and it will be displayed when that tag receives focus. Obviously however, there are tags that are logically better suited for instantiating datepickers:<\/p>\n