date picker
date picker

--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,19 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/sqldialects.xml" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/README.md" afterPath="" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/README.txt" afterPath="" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/cron.php" afterPath="" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/generateConvos.php" afterPath="" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/run.bat" afterPath="" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/db.sql" afterPath="$PROJECT_DIR$/db.sql" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/generateHourlys.php" afterPath="$PROJECT_DIR$/generateHourlys.php" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/common.inc.php" afterPath="$PROJECT_DIR$/common.inc.php" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/viewcalls.php" afterPath="$PROJECT_DIR$/viewcalls.php" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
     </list>
     <ignored path="scannr.iws" />
     <ignored path=".idea/workspace.xml" />
-    <file path="/Dummy.txt" changelist="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" time="1357777493718" ignored="false" />
+    <file path="/Dummy.txt" changelist="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" time="1357864234218" ignored="false" />
     <file path="/calllog.php" changelist="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" time="1356153807482" ignored="false" />
     <file path="/scannr.py" changelist="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" time="1356154551131" ignored="false" />
     <file path="/start_script.py" changelist="f90ee5b5-97e4-47ec-9b14-d4f4e896f100" time="1356155203132" ignored="false" />
@@ -81,11 +75,15 @@
   </component>
   <component name="FileEditorManager">
     <leaf>
-      <file leaf-file-name="trunklog.php" pinned="false" current="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/trunklog.php">
+      <file leaf-file-name="viewcalls.php" pinned="false" current="true" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/viewcalls.php">
           <provider selected="true" editor-type-id="text-editor">
-            <state line="5" column="15" selection-start="126" selection-end="126" vertical-scroll-proportion="0.0">
-              <folding />
+            <state line="14" column="55" selection-start="583" selection-end="583" vertical-scroll-proportion="0.31111112">
+              <folding>
+                <element signature="n#style#0;n#span#0;n#td#0;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+                <element signature="n#style#0;n#div#0;n#td#1;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+                <element signature="n#style#0;n#span#0;n#td#2;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
@@ -93,34 +91,19 @@
       <file leaf-file-name="common.inc.php" pinned="false" current="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/common.inc.php">
           <provider selected="true" editor-type-id="text-editor">
-            <state line="88" column="47" selection-start="3147" selection-end="3147" vertical-scroll-proportion="0.0">
-              <folding />
+            <state line="72" column="49" selection-start="2814" selection-end="2814" vertical-scroll-proportion="-17.5">
+              <folding>
+                <marker date="1357865020704" expanded="true" signature="2886:3131" placeholder="..." />
+                <marker date="1357865020704" expanded="true" signature="2955:2993" placeholder="..." />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="db.sql" pinned="false" current="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/db.sql">
+      <file leaf-file-name="datepicker.php" pinned="false" current="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/datepicker.php">
           <provider selected="true" editor-type-id="text-editor">
-            <state line="93" column="0" selection-start="1887" selection-end="2009" vertical-scroll-proportion="-13.16">
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="generateHourlys.php" pinned="false" current="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/generateHourlys.php">
-          <provider selected="true" editor-type-id="text-editor">
-            <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="calllog.php" pinned="false" current="true" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/calllog.php">
-          <provider selected="true" editor-type-id="text-editor">
-            <state line="18" column="63" selection-start="368" selection-end="368" vertical-scroll-proportion="0.38626608">
+            <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="-0.0">
               <folding />
             </state>
           </provider>
@@ -145,13 +128,13 @@
   <component name="IdeDocumentHistory">
     <option name="changedFiles">
       <list>
-        <option value="$PROJECT_DIR$/common.inc.php" />
-        <option value="$PROJECT_DIR$/viewcalls.php" />
         <option value="$PROJECT_DIR$/calllog.php" />
         <option value="$PROJECT_DIR$/scannr.py" />
         <option value="$PROJECT_DIR$/calls.json.php" />
         <option value="$PROJECT_DIR$/db.sql" />
         <option value="$PROJECT_DIR$/generateHourlys.php" />
+        <option value="$PROJECT_DIR$/viewcalls.php" />
+        <option value="$PROJECT_DIR$/common.inc.php" />
       </list>
     </option>
   </component>
@@ -187,8 +170,6 @@
       <sortByType />
     </navigator>
     <panes>
-      <pane id="Scope" />
-      <pane id="PackagesPane" />
       <pane id="ProjectPane">
         <subPane>
           <PATH>
@@ -207,18 +188,34 @@
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
           </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="scannr" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="scannr" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="js" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
         </subPane>
       </pane>
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
     <property name="options.lastSelected" value="preferences.pluginManager" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="options.splitter.details.proportions" value="0.2" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="options.searchVisible" value="true" />
+    <property name="options.splitter.main.proportions" value="0.3" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../disclosr" />
     <property name="FullScreen" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/../disclosr" />
-    <property name="options.splitter.main.proportions" value="0.3" />
   </component>
   <component name="PyConsoleOptionsProvider">
     <option name="myPythonConsoleState">
@@ -234,6 +231,9 @@
     </key>
   </component>
   <component name="RunManager">
+    <configuration default="true" type="PhpLocalRunConfigurationType" factoryName="PHP Console">
+      <method />
+    </configuration>
     <configuration default="true" type="JavascriptDebugSession" factoryName="Local" singleton="true">
       <JSDebuggerConfigurationSettings>
         <option name="engineId" value="embedded" />
@@ -380,11 +380,6 @@
         <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0" />
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/viewcalls.php">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="41" column="69" selection-start="1388" selection-end="1388" vertical-scroll-proportion="1.2659575" />
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/scannr.py">
       <provider selected="true" editor-type-id="text-editor">
         <state line="80" column="64" selection-start="2271" selection-end="2271" vertical-scroll-proportion="0.0" />
@@ -402,7 +397,7 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/db.sql">
       <provider selected="true" editor-type-id="text-editor">
-        <state line="93" column="0" selection-start="1887" selection-end="2009" vertical-scroll-proportion="-13.16">
+        <state line="94" column="0" selection-start="1905" selection-end="1905" vertical-scroll-proportion="0.0">
           <folding />
         </state>
       </provider>
@@ -414,13 +409,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/common.inc.php">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="88" column="47" selection-start="3147" selection-end="3147" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/generateHourlys.php">
       <provider selected="true" editor-type-id="text-editor">
         <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
@@ -430,8 +418,36 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/calllog.php">
       <provider selected="true" editor-type-id="text-editor">
-        <state line="18" column="63" selection-start="368" selection-end="368" vertical-scroll-proportion="0.38626608">
+        <state line="20" column="93" selection-start="386" selection-end="386" vertical-scroll-proportion="0.44444445">
           <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/common.inc.php">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="72" column="49" selection-start="2814" selection-end="2814" vertical-scroll-proportion="-17.5">
+          <folding>
+            <marker date="1357865020704" expanded="true" signature="2886:3131" placeholder="..." />
+            <marker date="1357865020704" expanded="true" signature="2955:2993" placeholder="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/datepicker.php">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="-0.0">
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/viewcalls.php">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="14" column="55" selection-start="583" selection-end="583" vertical-scroll-proportion="0.31111112">
+          <folding>
+            <element signature="n#style#0;n#span#0;n#td#0;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+            <element signature="n#style#0;n#div#0;n#td#1;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+            <element signature="n#style#0;n#span#0;n#td#2;n#tr#0;n#table#0;n#div#0;n#!!top" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>

--- a/common.inc.php
+++ b/common.inc.php
@@ -57,12 +57,20 @@
 
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/main.css">
+
+    <link href="css/daterangepicker.css" rel="stylesheet">
         <script src="js/vendor/modernizr-2.6.1.min.js"></script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
         <!--<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>-->
         <script type="text/javascript" src="<?php echo $basePath ?>js/flotr2/flotr2.js"></script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
+    <!-- xcharts includes -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
+
+    <!-- The daterange picker bootstrap plugin -->
+    <script src="js/sugar.min.js"></script>
+    <script src="js/daterangepicker.js"></script>
     </head>
     <body>
     <!--[if lt IE 7]>

--- /dev/null
+++ b/css/daterangepicker.css
@@ -1,1 +1,196 @@
+.daterangepicker.dropdown-menu {
+  max-width: none;
+}
 
+.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
+  float: left;
+  margin: 4px;
+}
+
+.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
+  float: right;
+  margin: 4px;
+}
+
+.daterangepicker .ranges {
+  width: 160px;
+  text-align: left;
+}
+
+.daterangepicker .ranges .range_inputs>div {
+  float: left;
+}
+
+.daterangepicker .ranges .range_inputs>div:nth-child(2) {
+  padding-left: 11px;
+}
+
+.daterangepicker .calendar {
+  display: none;
+  max-width: 230px;
+}
+
+.daterangepicker .calendar th, .daterangepicker .calendar td {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.daterangepicker .ranges label {
+  color: #333;
+  font-size: 11px;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 0 #fff;
+}
+
+.daterangepicker .ranges input {
+  font-size: 11px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.daterangepicker .ranges li {
+  font-size: 13px;
+  background: #f5f5f5;
+  border: 1px solid #f5f5f5;
+  color: #08c;
+  padding: 3px 12px;
+  margin-bottom: 8px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
+  background: #08c;
+  border: 1px solid #08c;
+  color: #fff;
+}
+
+.daterangepicker .calendar {
+  border: 1px solid #ddd;
+  padding: 4px;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.daterangepicker {
+  position: absolute;
+  background: #fff;
+  top: 100px;
+  left: 20px;
+  padding: 4px;
+  margin-top: 1px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.daterangepicker.opensleft:before {
+  position: absolute;
+  top: -7px;
+  right: 9px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker.opensleft:after {
+  position: absolute;
+  top: -6px;
+  right: 10px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.daterangepicker.opensright:before {
+  position: absolute;
+  top: -7px;
+  left: 9px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker.opensright:after {
+  position: absolute;
+  top: -6px;
+  left: 10px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.daterangepicker table {
+  width: 100%;
+  margin: 0;
+}
+
+.daterangepicker td, .daterangepicker th {
+  text-align: center;
+  width: 20px;
+  height: 20px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.daterangepicker td.off {
+  color: #999;
+}
+.daterangepicker td.disabled {
+  color: #999;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background: #eee;
+}
+
+.daterangepicker td.in-range {
+  background: #ebf4f8;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #006dcc;
+  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+  border-color: #0044cc #0044cc #002a80;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+    font-size: 80%;
+    color: #ccc;
+}
+

file:b/datepicker.php (new)
--- /dev/null
+++ b/datepicker.php
@@ -1,1 +1,46 @@
+bri<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
 
+        <title>Pretty Charts with jQuery and AJAX | Tutorialzine Demo</title>
+		<!-- Include bootstrap css -->
+		<link href="css/daterangepicker.css" rel="stylesheet">
+
+    </head>
+    <body>
+		<div id="content">
+			
+			<form class="form-horizontal">
+			  <fieldset>
+		        <div class="input-prepend">
+		          <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="range" id="range" />
+		        </div>
+			  </fieldset>
+			</form>
+			
+			<div id="placeholder">
+				<figure id="chart"></figure>
+			</div>
+
+		</div>
+
+		<footer>
+            <h2><i>Tutorial:</i> Pretty Charts with jQuery and AJAX</h2>
+            <a class="tzine" href="http://tutorialzine.com/2013/01/charts-jquery-ajax/">Head on to <i>Tutorial<b>zine</b></i> to read and download</a>
+        </footer>
+
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+		<!-- xcharts includes -->
+		<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
+
+		<!-- The daterange picker bootstrap plugin -->
+		<script src="js/sugar.min.js"></script>
+		<script src="js/daterangepicker.js"></script>
+
+		<!-- Our main script file -->
+		<script src="js/script.js"></script>
+    </body>
+</html>
+

--- /dev/null
+++ b/js/daterangepicker.js
@@ -1,1 +1,609 @@
-
+/**
+* @version: 1.0.1
+* @author: Dan Grossman http://www.dangrossman.info/
+* @date: 2012-08-20
+* @copyright: Copyright (c) 2012 Dan Grossman. All rights reserved.
+* @license: Licensed under Apache License v2.0. See http://www.apache.org/licenses/LICENSE-2.0
+* @website: http://www.improvely.com/
+*/
+!function ($) {
+
+    var DateRangePicker = function (element, options, cb) {
+        var hasOptions = typeof options == 'object'
+        var localeObject;
+
+        //state
+        this.startDate = Date.create('today');
+        this.endDate = Date.create('today');
+        this.minDate = false;
+        this.maxDate = false;
+        this.changed = false;
+        this.cleared = false;
+        this.ranges = {};
+        this.opens = 'right';
+        this.cb = function () { };
+        this.format = '{MM}/{dd}/{yyyy}';
+        this.separator = ' - ';
+        this.showWeekNumbers = false;
+        this.buttonClasses = ['btn-success'];
+        this.locale = {
+            applyLabel: 'Apply',
+            clearLabel:"Clear",
+            fromLabel: 'From',
+            toLabel: 'To',
+            weekLabel: 'W',
+            customRangeLabel: 'Custom Range',
+            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+            firstDay: 0
+        };
+
+        localeObject = this.locale;
+
+        this.leftCalendar = {
+            month: Date.create('today').set({ day: 1, month: this.startDate.getMonth(), year: this.startDate.getFullYear() }),
+            calendar: Array()
+        };
+
+        this.rightCalendar = {
+            month: Date.create('today').set({ day: 1, month: this.endDate.getMonth(), year: this.endDate.getFullYear() }),
+            calendar: Array()
+        };
+
+        //element that triggered the date range picker
+        this.element = $(element);
+
+        if (this.element.hasClass('pull-right'))
+            this.opens = 'left';
+
+        if (this.element.is('input')) {
+            this.element.on({
+                click: $.proxy(this.show, this),
+                focus: $.proxy(this.show, this)
+            });
+        } else {
+            this.element.on('click', $.proxy(this.show, this));
+        }
+
+        if (hasOptions) {
+            if(typeof options.locale == 'object') {
+                $.each(localeObject, function (property, value) {
+                    localeObject[property] = options.locale[property] || value;
+                });
+            }
+        }
+
+        var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +
+                '<div class="calendar left"></div>' +
+                '<div class="calendar right"></div>' +
+                '<div class="ranges">' +
+                  '<div class="range_inputs">' +
+                    '<div class="daterangepicker_start_input" style="float: left">' +
+                      '<label for="daterangepicker_start">' + this.locale.fromLabel + '</label>' +
+                      '<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
+                    '</div>' +
+                    '<div class="daterangepicker_end_input" style="float: left; padding-left: 11px">' +
+                      '<label for="daterangepicker_end">' + this.locale.toLabel + '</label>' +
+                      '<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
+                    '</div>' +
+                    '<button class="btn btn-small btn-success applyBtn" disabled="disabled">' + this.locale.applyLabel + '</button>&nbsp;' +
+                    '<button class="btn btn-small clearBtn">' + this.locale.clearLabel + '</button>' +
+                  '</div>' +
+                '</div>' +
+              '</div>';
+
+        this.container = $(DRPTemplate).appendTo('body');
+
+        if (hasOptions) {
+
+            if (typeof options.format == 'string')
+                this.format = options.format;
+
+            if (typeof options.separator == 'string')
+                this.separator = options.separator;
+
+            if (typeof options.startDate == 'string')
+                this.startDate = Date.create(options.startDate);
+
+            if (typeof options.endDate == 'string')
+                this.endDate = Date.create(options.endDate);
+
+            if (typeof options.minDate == 'string')
+                this.minDate = Date.create(options.minDate);
+
+            if (typeof options.maxDate == 'string')
+                this.maxDate = Date.create(options.maxDate);
+
+
+            if (typeof options.startDate == 'object')
+                this.startDate = options.startDate;
+
+            if (typeof options.endDate == 'object')
+                this.endDate = options.endDate;
+
+            if (typeof options.minDate == 'object')
+                this.minDate = options.minDate;
+
+            if (typeof options.maxDate == 'object')
+                this.maxDate = options.maxDate;
+
+            if (typeof options.ranges == 'object') {
+                for (var range in options.ranges) {
+
+                    var start = options.ranges[range][0];
+                    var end = options.ranges[range][1];
+
+                    if (typeof start == 'string')
+                        start = Date.create(start);
+
+                    if (typeof end == 'string')
+                        end = Date.create(end);
+
+                    // If we have a min/max date set, bound this range
+                    // to it, but only if it would otherwise fall
+                    // outside of the min/max.
+                    if (this.minDate && start < this.minDate)
+                        start = this.minDate;
+
+                    if (this.maxDate && end > this.maxDate)
+                        end = this.maxDate;
+
+                    // If the end of the range is before the minimum (if min is set) OR
+                    // the start of the range is after the max (also if set) don't display this
+                    // range option.
+                    if ((this.minDate && end < this.minDate) || (this.maxDate && start > this.maxDate))
+                    {
+                        continue;
+                    }
+
+                    this.ranges[range] = [start, end];
+                }
+
+                var list = '<ul>';
+                for (var range in this.ranges) {
+                    list += '<li>' + range + '</li>';
+                }
+                list += '<li>' + this.locale.customRangeLabel + '</li>';
+                list += '</ul>';
+                this.container.find('.ranges').prepend(list);
+            }
+
+            // update day names order to firstDay
+            if (typeof options.locale == 'object') {
+                if (typeof options.locale.firstDay == 'number') {
+                    this.locale.firstDay = options.locale.firstDay;
+                    var iterator = options.locale.firstDay;
+                    while (iterator > 0) {
+                        this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());
+                        iterator--;
+                    }
+                }
+            }
+
+            if (typeof options.opens == 'string')
+                this.opens = options.opens;
+
+            if (typeof options.showWeekNumbers == 'boolean') {
+                this.showWeekNumbers = options.showWeekNumbers;
+            }
+
+            if (typeof options.buttonClasses == 'string') {
+                this.buttonClasses = [options.buttonClasses];
+            }
+
+            if (typeof options.buttonClasses == 'object') {
+                this.buttonClasses = options.buttonClasses;
+            }
+
+        }
+
+        //apply CSS classes to buttons
+        var c = this.container;
+        $.each(this.buttonClasses, function (idx, val) {
+            c.find('button').addClass(val);
+        });
+
+        if (this.opens == 'right') {
+            //swap calendar positions
+            var left = this.container.find('.calendar.left');
+            var right = this.container.find('.calendar.right');
+            left.removeClass('left').addClass('right');
+            right.removeClass('right').addClass('left');
+        }
+
+        if (typeof options == 'undefined' || typeof options.ranges == 'undefined')
+            this.container.find('.calendar').show();
+
+        if (typeof cb == 'function')
+            this.cb = cb;
+
+        this.container.addClass('opens' + this.opens);
+
+        //event listeners
+        this.container.on('mousedown', $.proxy(this.mousedown, this));
+        this.container.find('.calendar').on('click', '.prev', $.proxy(this.clickPrev, this));
+        this.container.find('.calendar').on('click', '.next', $.proxy(this.clickNext, this));
+        this.container.find('.ranges').on('click', 'button.applyBtn', $.proxy(this.clickApply, this));
+        this.container.find('.ranges').on('click', 'button.clearBtn', $.proxy(this.clickClear, this));
+
+        this.container.find('.calendar').on('click', 'td.available', $.proxy(this.clickDate, this));
+        this.container.find('.calendar').on('mouseenter', 'td.available', $.proxy(this.enterDate, this));
+        this.container.find('.calendar').on('mouseleave', 'td.available', $.proxy(this.updateView, this));
+
+        this.container.find('.ranges').on('click', 'li', $.proxy(this.clickRange, this));
+        this.container.find('.ranges').on('mouseenter', 'li', $.proxy(this.enterRange, this));
+        this.container.find('.ranges').on('mouseleave', 'li', $.proxy(this.updateView, this));
+
+        this.element.on('keyup', $.proxy(this.updateFromControl, this));
+
+        this.updateView();
+        this.updateCalendars();
+
+    };
+
+    DateRangePicker