Using Datepicker in Javascript: 5 Libraries you should give it a try

5 JavaScript Libraries you should give it a try. It seems like there are hundreds of datepicker widgets available online. But we will just target 5 JavaScript libraries to showcase date.

In Articles, Blog, jQuery

Datepicker: 5 JavaScript Libraries you should give it a try

It seems like there are hundreds of datepicker widgets available online. But we will just target 5 JavaScript libraries to showcase date. Out of five, who will win the race, we will find out soon. We are expecting the winner should have the following basic requirements for the developers and end users:

  1. It should be easy to implement and easy to use.
  2. It should be highly configurable to meet different requirements.
  3. Users should be able to change the color scheme.
  4. It shouldn’t contain multiple files to import.

How it works?

Datepicker is an easy way to introduce a date into an HTML input field. You can choose a date of specific pattern that requires little effort to read. If a date is selected, feedback is shown as the input’s value. That’s it. Voila!

More specially, today we will discuss the following JavaScript libraries:

  1. js
  2. Pikaday + Moment.js
  3. JQuery UI Datepicker
  4. Mootools Datepicker
  5. Bootstrap Datepicker

Getting Started

Moment.js

Momentjs is a lightweight JavaScript date library for parsing, validating, manipulating and formatting dates and time. Its aim to bring in both the browser and in NodesJS. [1]

Moment.js in NodeJS

First, install the moment.js module by writing the following command:

npm install moment

Now, you can use the moment in your application by adding:

var moment = require(‘moment’);

moment().format();

Moment.js in Browser

Download the moment.js file from the website and include it in the head of HTML markup. Moment.js creates a global `moment` object which now you can use to access all the date and time parsing, validating and manipulation functionality.

HTML Markup

<!doctype html>
<html lang="en">
<head>
<title>Datepicker: Moment.js</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="js/moment.min.js"></script>
<script type="text/javascript">
functionsetDateTime() {
var date = moment().format('MMMM Do YYYY, h:mm:ss a'); // December 6th 2014, 12:55:06 pm
// console.log(date);
document.getElementById('date').innerHTML = date;
}
window.onload = function() {
setDateTime();
setInterval(setDateTime,1000);
}
</script>
</head>
<body>
<div class="container">
<h3>Datepicker: Moment.js</h3>
<div id="date"></div>
</div>
</body>
</html>

 

1

Figure1: Datepicker using Moment.js

A number of useful plugins are also available for moment.js such as Strftime, ISO Calendar, Date Ranges and many more that can be found on the official plugin page. There is a lot more you can do with moment.js. Read more on documentation page. I would also suggest to take a look at Moment js tutorial here

Pikadate + Moment.js

Pikadate is a lightweight JavaScript Datepicker which has no dependencies and has module CSS classes for simple styling. You can use pikadate well with Moment.js. We have created a HTML markup to showcase an example.[4]

HTML Markup

<!doctype html>
<html lang="en">
<head>
<title>Datepicker: Moment.js</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/pikaday.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<h3>Datepicker: Pikadate + Moment.js</h3>
<input type="text" id="datepicker" value="9 Oct 2014" >
<div id="selected"></div>
</div>
<script src="js/moment.min.js"></script>
<script src="js/pikaday.js"></script>
<script type="text/javascript">
var picker = new Pikaday(
{field: document.getElementById('datepicker'),
onSelect: function() {
var date = document.createTextNode(this.getMoment().format('Do MMMM YYYY') + ' ');
document.getElementById('selected').appendChild(date);}});
picker.setMoment(moment().dayOfYear(366));
</script>
</body>
</html>

 

2

Figure2: Datepicker using Pikadate and Moment.js

JQuery UI Datepicker

The jQuery UI Datepicker is a highly configuration plugin that adds datepicker functionality to your web-pages. You can modify the date format and language, limit the selectable date ranges and add in buttons and other navigation options easily. [2]

Have  a look at this tutorial on How to manipulate date in Jquery UI DatePicker

HTML Markup

<!doctype html>
<html lang="en">
<head>
<title>Datepicker: JQuery UI</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="container">
<h3>Datepicker: JQuery UI</h3>
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>

 

3

Figure3: Datepicker using JQuery UI

MooTools Datepicker

Mootools Datepicker is a nice modular and themeable datepicker. It has many options and features, such as day, month, year or timepicker only modes, minimum and maximum dates, localization and a many more. [3]

HTML Markup

<!doctype html>
<html lang="en">
<head>
<title>Datepicker: Mootools</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/datepicker_bootstrap.css" rel="stylesheet" />
<script src="js/mootools-core.js" type="text/javascript"></script>
<script src="js/mootools-more.js" type="text/javascript"></script>
<script src="js/Locale.en-US.DatePicker.js" type="text/javascript"></script>
<script src="js/Picker.js" type="text/javascript"></script>
<script src="js/Picker.Attach.js" type="text/javascript"></script>
<script src="js/Picker.Date.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
newPicker.Date($$('input'), {
timePicker: true,
positionOffset: {x: 5, y: 0},
pickerClass: 'datepicker_bootstrap',
useFadeInOut: !Browser.ie
});
});
</script>
</head>
<body>
<div class="container">
<h3> Datepicker: Mootools</h3>
<p>Date: <input type="text"></p>
</div>
</body>
</html>

 

4

Figure4: Datepicker using Mootools

 

5

Figure5: Timepicker using Mootools

Bootstrap Datepicker

Bootstrap datepicker is a datepicker widget that uses Twitter’s bootstrap library. It renders a calendar popup for choosing dates when users click on input elements.

There are two main versions of the library in use.

  1. One is the original library by Stefan ‘eyecon’ Petre.
  2. The other is eternicode’s fork of the library. Currently, this version is under development.

The documentation of the Bootstrap datepicker can be found here.

HTML Markup

<!doctype html>
<html lang="en">
<head>
<title>Datepicker: Bootstrap</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css>
<link href="css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="container">
<h3>Datepicker: Bootstrap</h3>
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>

 

6

Figure6: Datepicker using Bootstrap

Now, let’s add some basic styling: CSS

* {
margin: 0 auto;
padding: 0;
}
body {
background-color: #F2F2F2;
}
.container {
margin: 0 auto;
width: 920px;
padding: 50px 20px;
background-color: #fff;
}
h3 {
text-align: center;
}
p {
margin: 20px;
}
#date {
font-size: 20px;
text-align: center;
margin-top: 40px;
}

How they differ from each other?

Few basic difference between the aforementioned Datepicker libraries are:

Moment.js Pikadate + Moment.js JQuery UI Datepicker Mootools Datepicker Bootstrap Datepicker
  1. Current Version (as of 6-Dec-14)
2.8.4 1.0.0 1.11.2 2.2.0 3.3.1
  1. Min File Size (approx.)
32.9 KB 30.9 KB 39.1 KB Multiple Dependencies 13.4 KB
  1. Open Source
Yes Yes Yes Yes Yes
  1. Stackoverflow Tagged Question (as of 6-Dec-2014)
735 9 1,751 146
  1. Documentation
Excellent Good Excellent Good Excellent
  1. GitHub Page
Yes Yes Yes Yes Yes
  1. GitHub Contributors
227 27 257 60 135
  1. Demo Page
No Yes Yes Yes Yes

 

Note:We are not following any sequence here. The above list are in random sequence. You can use any of them which suits the best of your requirements.

Conclusion

Every JavaScript datepicker has both advantages and dis-advantages. Which JavaScript you decide to go with is totally depends on your application requirements and your choice. As long as they are productive and fulfill your needs, then that is the winner.

Please share your thoughts, and do let us know if we missed any important point.

Reference

[1] http://momentjs.com/

[2] http://api.jqueryui.com/datepicker/

[3] http://mootools.net/forge/p/mootools_datepicker

[4]https://github.com/dbushell/Pikaday

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 0 Comments On Using Datepicker in Javascript: 5 Libraries you should give it a try, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php