Baremetrics provides zero-setup subscription analytics & insights for Stripe, Braintree and Recurly. Get started today!
The Baremetrics date range picker is a simplified solution for selecting both date ranges and single dates all from a single calender view. There aren't a billion options but the code is pretty basic and modular so feel free to edit however to meet your own needs.
Design by Chris Meeks
Code by Tyler van der Hoeven
View a demo
View in a live production app
Using the date picker is pretty simple, you've just got to make a couple choices and include a couple settings.
Create a div with a daterange
class and then either the daterange--double
or daterange--single
classname for targeting the specific calendar you'd like to generate.
<div class="daterange daterange--double"></div>
<div class="daterange daterange--single"></div>
Next you've just gotta create a new Calendar
instance.
new Calendar({
element: $('.daterange--single'),
current_date: '2015-06-15',
format: {input: 'M/D/YYYY'},
required: false
});
new Calendar({
element: $('.daterange--double'),
earliest_date: '2000-01-1',
latest_date: moment(),
start_date: '2015-05-01',
end_date: '2015-05-31',
callback: function() {
var start = moment(this.start_date).format('ll'),
end = moment(this.end_date).format('ll');
console.debug('Start Date: '+ start +'\nEnd Date: '+ end);
}
});
[jQuery DOM object]
[date YYYY-MM-DD]
[date YYYY-MM-DD]
[function]
this.earliest_date
and this.latest_date
for doing things with your calendar's dates[object]
format: {
input: 'MMMM D, YYYY', // Format for the input fields
jump_month: 'MMMM', // Format for the month switcher
jump_year: 'YYYY' // Format for the year switcher
}
[array]
days_array: ['S','M','T','W','T','F','S']
[date YYYY-MM-DD]
[boolean]
[string]
false
). The default will be whatever moment date format you're using. (i.e. 'M/D/YYYY')[date YYYY-MM-DD]
[date YYYY-MM-DD]
[boolean]
[preset key in format object] // see above
preset
key to the format object for formatting the preset dates in the preset dropdown[boolean] or [object]
false
otherwise the default is true which will just give you a basic preset of.. yep.. presets. BOOM!presets: [{
label: 'Last month',
start: moment().subtract(1, 'month').startOf('month'),
end: moment().subtract(1, 'month').endOf('month')
},{
label: 'Last year',
start: moment().subtract(1, 'year').startOf('year'),
end: moment().subtract(1, 'year').endOf('year')
}]
I've included my signature gulpfile too so be sure and take a look at that as well.
$ cd <project directory>
$ npm install
$ gulp
I also use pow and the powder gem to run my local dev environments but however you plan on wrangling that the gulpfile turns on a livereload server so as long as you have the files serving somehow any changes you make will show up instantly.