Date Range Picker Similar to Google Analytics

, , ,



First download jQuery and DatePicker and include them:

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/datepicker/js/datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="/js/datepicker/css/base.css" />
<link rel="stylesheet" type="text/css" href="/js/datepicker/css/clean.css" />

HTML Markup

<div id="date-range">
  <div id="date-range-field">
    <span></span>
    <a href="#">&#9660;</a>
  </div>
  <div id="datepicker-calendar"></div>
</div>

JavaScript

<script type="text/javascript">
  $(document).ready(function() {
 
  var to = new Date();
  var from = new Date(to.getTime() - 1000 * 60 * 60 * 24 * 14);
 
  $('#datepicker-calendar').DatePicker({
    inline: true,
    date: [from, to],
    calendars: 3,
    mode: 'range',
    current: new Date(to.getFullYear(), to.getMonth() - 1, 1),
    onChange: function(dates,el) {
      // update the range display
      $('#date-range-field span').text(dates[0].getDate()+' '+dates[0].getMonthName(true)+', '+dates[0].getFullYear()+' - '+
                                        dates[1].getDate()+' '+dates[1].getMonthName(true)+', '+dates[1].getFullYear());
     }
   });
 
   // initialize the special date dropdown field
   $('#date-range-field span').text(from.getDate()+' '+from.getMonthName(true)+', '+from.getFullYear()+' - '+
                                        to.getDate()+' '+to.getMonthName(true)+', '+to.getFullYear());
 
   // bind a click handler to the date display field, which when clicked
   // toggles the date picker calendar, flips the up/down indicator arrow,
   // and keeps the borders looking pretty
   $('#date-range-field').bind('click', function(){
     $('#datepicker-calendar').toggle();
     if($('#date-range-field a').text().charCodeAt(0) == 9660) {
       // switch to up-arrow
       $('#date-range-field a').html('&#9650;');
       $('#date-range-field').css({borderBottomLeftRadius:0, borderBottomRightRadius:0});
       $('#date-range-field a').css({borderBottomRightRadius:0});
     } else {
       // switch to down-arrow
       $('#date-range-field a').html('&#9660;');
       $('#date-range-field').css({borderBottomLeftRadius:5, borderBottomRightRadius:5});
       $('#date-range-field a').css({borderBottomRightRadius:5});
     }
     return false;
   });
 
   // global click handler to hide the widget calendar when it's open, and
   // some other part of the document is clicked.  Note that this works best
   // defined out here rather than built in to the datepicker core because this
   // particular example is actually an 'inline' datepicker which is displayed
   // by an external event, unlike a non-inline datepicker which is automatically
   // displayed/hidden by clicks within/without the datepicker element and datepicker respectively
   $('html').click(function() {
     if($('#datepicker-calendar').is(":visible")) {
       $('#datepicker-calendar').hide();
       $('#date-range-field a').html('&#9660;');
       $('#date-range-field').css({borderBottomLeftRadius:5, borderBottomRightRadius:5});
       $('#date-range-field a').css({borderBottomRightRadius:5});
     }
   });
 
   // stop the click propagation when clicking on the calendar element
   // so that we don't close it
   $('#datepicker-calendar').click(function(event){
     event.stopPropagation();
   });
 });
</script>

CSS

<style type="text/css">
  /* Style the calendar custom widget */
  #date-range {
    position:relative;
  }
  #date-range-field {
    width: 290px;
    height: 26px;
    overflow: hidden;
    position: relative;
    cursor:pointer;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
  }
 
  #date-range-field a  {
    color:#B2B2B2;
    background-color:#F7F7F7;
    text-align:center;
    display: block;
    position: absolute;
    width: 26px;
    height: 23px;
    top: 0;
    right: 0;
    text-decoration: none;
    padding-top:6px;
    border-radius: 0 5px 5px 0;
  }
 
  #date-range-field span {
    font-size: 12px;
    font-weight: bold;
    color: #404040;
    position: relative;
    top: 0;
    height: 26px;
    line-height: 26px;
    left: 5px;
    width: 250px;
    text-align: center;
  }
 
  #datepicker-calendar {
    position: absolute;
    top: 27px;
    left: 0;
    overflow: hidden;
    width: 497px;
    height:153px;
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    border-radius: 0 5px 5px 5px;
    display:none;
    padding:10px 0 0 10px;
  }
 
  /* Remove default border from the custom widget since we're adding our own. */
  #datepicker-calendar div.datepicker {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
</style>



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.