January 30, 2024 5:03 am

How to create a jQuery date picker like Google Analytic

I have received many requests from my readers to write about jQuery date picker and I like date picker of Google Analytic and going to explain you how it works and complete tutorial with source code and live example where you can check its scenario. Its a jQuery plugin i have used to create this date picker which accepting single, range, and multiple selected dates.


[wpdm_file id=40]

jQuery libraries you need include

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/DateRange.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
                $(\'.pickerContainer.basic\').DatePicker({mode:"single", date: new Date(), inline: true});
                $(\'.pickerContainer.range\').DatePicker({mode:"range", date: [\'2012-11-01\', new Date()], inline: true, calendars: 2});

HTML and css required to design calendars:

<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/example.css" />

<div id="container">
<div class="item">
<h2>Single DatePicker</h2>
<div class="pickerContainer basic"></div>
<div class="item">
<h2>Basic DatePicker</h2>
<div class="pickerContainer range"></div>

Hope you understand and learn about date picker if any confusion please feel free to comment.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:

Leave a Reply

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