I’ve always loved the calendar date range selector in Google Analytics, it’s extremely user-friendly for the task of selecting a range of dates; much more so than the typical dual input boxes with independent calendars. There are a few options out there for replicating the Google Analytics range picker, however I couldn’t seem to find any that offered the functionality, looks, and ease of use right out of the box. The closest I could find was the DatePicker offered by Stefan Petre, so I decided to use that as a starting point and create a Google Analytics inspired DatePicker of my own.
My version builds off of Petre’s with the following changes:
- Split stylesheet into base.css to allow easier styling, and dark.css as the first full style.
- Created clean.css to provide a style similar to Google Analytics.
- Clicking the calendar month title selects the whole month when in ‘range’ mode.
- Removed the ‘week’ column.
- Heavy refactoring/commenting of the code.
- Created new examples page and documentation suite.
Which gives me the working example below:
Documentation and Download
See the following links below for the source code, examples page and documentation page.
- DatePicker GitHub Repository
- DatePicker GitHub Project Page With Examples
- DatePicker Documentation
- Download the Latest DatePicker
To create the above date drop-down widget, you can use code like the following:
First download jQuery and DatePicker and include them:
Add the following HTML markup where you want the widget positioned:
<div>, update the date display, and handle displaying/hiding the calendar on click.
And finally the CSS to style the dropdown widget: