diff --git a/dev/js/Calendar.js b/dev/js/Calendar.js index 7588f8d..e0a5031 100644 --- a/dev/js/Calendar.js +++ b/dev/js/Calendar.js @@ -42,23 +42,37 @@ this.orig_start_date = null; this.orig_end_date = null; this.orig_current_date = null; + this.orig_preset_label = null; this.earliest_date = settings.earliest_date ? moment(settings.earliest_date) : moment('1900-01-01', 'YYYY-MM-DD'); this.latest_date = settings.latest_date ? moment(settings.latest_date) : moment('2900-12-31', 'YYYY-MM-DD'); - this.end_date = settings.end_date ? moment(settings.end_date) - : (this.type == 'double' ? moment() : null); - this.start_date = settings.start_date ? moment(settings.start_date) - : (this.type == 'double' ? this.end_date.clone().subtract(1, 'month') : null); this.current_date = settings.current_date ? moment(settings.current_date) : (this.type == 'single' ? moment() : null); + this.preset_label = settings.preset_label ? settings.preset_label + : (this.type == 'single' ? 'Last 3 months' : null); + if(this.preset_label) { + var self = this; + var preset = settings.presets.find(function(obj) { + return obj.label === self.preset_label; + }); + this.start_date = preset.start; + this.end_date = preset.end; + } else { + this.start_date = settings.start_date ? moment(settings.start_date) + : (this.type == 'double' ? this.end_date.clone().subtract(1, 'month') : null); + this.end_date = settings.end_date ? moment(settings.end_date) + : (this.type == 'double' ? moment() : null); + } + this.sticky_presets = settings.sticky_presets || false; this.presets = settings.presets == false || this.type == 'single' ? false : true; this.callback = settings.callback || this.calendarSetDates; this.calendarHTML(this.type); + this.calendarSetDates(); $('.dr-presets', this.element).click(function() { self.presetToggle(); @@ -68,6 +82,11 @@ var start = $('.dr-item-aside', this).data('start'); var end = $('.dr-item-aside', this).data('end'); + self.preset_label = $(this).data('label'); + if (self.preset_label == 'custom'){ + self.calendarOpen($('.dr-date', this.element)); + return; + } self.start_date = self.calendarCheckDate(start); self.end_date = self.calendarCheckDate(end); @@ -215,6 +234,7 @@ this.orig_start_date = this.start_date; this.orig_end_date = this.end_date; this.orig_current_date = this.current_date; + this.orig_preset_label = this.preset_label; this.presetIsOpen = true; } else if (this.presetIsOpen) { @@ -295,19 +315,32 @@ item.data('end', endISO); item.html(string); } else { - ul_presets.append('
  • '+ d.label + + ul_presets.append('
  • '+ d.label + ''+ string +''+ '
    • '); } }); - + ul_presets.append('
  • Custom
    • '); return ul_presets; } Calendar.prototype.calendarSetDates = function() { + // fill widgets with data $('.dr-date-start', this.element).html(moment(this.start_date).format(this.format.input)); $('.dr-date-end', this.element).html(moment(this.end_date).format(this.format.input)); + $('.dr-date-preset', this.element).html(this.preset_label); + + // show one set (preset vs. custom days) and hide the other + if (this.sticky_presets) { + if (this.preset_label) { + $('.dr-date-start, .dr-dates-dash, .dr-date-end', this.element).hide(); + $('.dr-date-preset', this.element).show(); + } else { + $('.dr-date-start, .dr-dates-dash, .dr-date-end', this.element).show(); + $('.dr-date-preset', this.element).hide(); + } + } if (!this.start_date && !this.end_date) { var old_date = $('.dr-date', this.element).html(); @@ -324,7 +357,7 @@ Calendar.prototype.calendarSaveDates = function() { if (this.type === 'double') { - if (!moment(this.orig_end_date).isSame(this.end_date) || !moment(this.orig_start_date).isSame(this.start_date)) + if (!moment(this.orig_end_date).isSame(this.end_date) || !moment(this.orig_start_date).isSame(this.start_date) || (this.sticky_presets && (this.orig_preset_label !== this.preset_label))) return this.callback(); } else { if (!this.required || !moment(this.orig_current_date).isSame(this.current_date)) @@ -371,6 +404,7 @@ Calendar.prototype.calendarCheckDates = function() { var startTxt = $('.dr-date-start', this.element).html(); var endTxt = $('.dr-date-end', this.element).html(); + var c = this.calendarCheckDate($(this.selected).html()); var s; var e; @@ -432,9 +466,13 @@ Calendar.prototype.calendarOpen = function(selected, switcher) { var self = this; var other; - var cal_width = $('.dr-dates', this.element).innerWidth() - 8; - this.selected = selected || this.selected; + if ($(selected).hasClass('dr-date-preset')) { + this.selected = $('.dr-date.dr-date-start', this.element).get(0); + this.preset_label = null; + } else { + this.selected = selected || this.selected; + } if (this.presetIsOpen == true) this.presetToggle(); @@ -445,6 +483,7 @@ this.orig_start_date = this.start_date; this.orig_end_date = this.end_date; this.orig_current_date = this.current_date; + this.orig_preset_label = this.preset_label; } this.calendarCheckDates(); @@ -584,11 +623,12 @@ }); } + var cal_width = $('.dr-dates', this.element).innerWidth() - 8; $('.dr-calendar', this.element) .css('width', cal_width) .slideDown(200); $('.dr-input', this.element).addClass('dr-active'); - $(selected).addClass('dr-active').focus(); + $(this.selected).addClass('dr-active').focus(); this.element.addClass('dr-active'); this.calIsOpen = true; @@ -690,6 +730,7 @@ '
    '+ moment(this.start_date).format(this.format.input) +'
    ' + '–' + '
    '+ moment(this.end_date).format(this.format.input) +'
    ' + + '' + '' + (this.presets ? '
    ' + @@ -781,6 +822,7 @@ if ($(cal.selected).hasClass('dr-date-start')) { $('.dr-date-end', cal.element).trigger('click'); } else { + self.preset_label = null; cal.calendarSaveDates(); cal.calendarClose('force'); } diff --git a/dev/js/app.js b/dev/js/app.js index 9d5f5d6..43fe07f 100644 --- a/dev/js/app.js +++ b/dev/js/app.js @@ -16,9 +16,10 @@ var dd = new Calendar({ end_date: moment(), callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } }); @@ -31,9 +32,10 @@ new Calendar({ presets: false, callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } }); @@ -58,8 +60,38 @@ new Calendar({ }], callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); + } +}); + +new Calendar({ + element: $('.four'), + sticky_presets: true, + earliest_date: '2000-01-01', + latest_date: moment(), + start_date: moment().subtract(29, 'days'), + end_date: moment(), + presets: [{ + label: 'Last 30 days', + start: moment().subtract(29, 'days'), + end: moment() + },{ + 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') + }], + callback: function() { + var start = moment(this.start_date).format('ll'), + end = moment(this.end_date).format('ll'), + preset = this.preset_label; + + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } }); diff --git a/public/index.html b/public/index.html index 4eed98c..4b6e189 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,8 @@

    Baremetrics Date Range Picker

    +
    +
    ' + (this.presets ? '
    ' + @@ -781,6 +822,7 @@ if ($(cal.selected).hasClass('dr-date-start')) { $('.dr-date-end', cal.element).trigger('click'); } else { + self.preset_label = null; cal.calendarSaveDates(); cal.calendarClose('force'); } diff --git a/public/js/app.js b/public/js/app.js index 9d5f5d6..43fe07f 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -16,9 +16,10 @@ var dd = new Calendar({ end_date: moment(), callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } }); @@ -31,9 +32,10 @@ new Calendar({ presets: false, callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } }); @@ -58,8 +60,38 @@ new Calendar({ }], callback: function() { var start = moment(this.start_date).format('ll'), - end = moment(this.end_date).format('ll'); + end = moment(this.end_date).format('ll'), + preset = this.preset_label; - console.debug('Start Date: '+ start +'\nEnd Date: '+ end); + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); + } +}); + +new Calendar({ + element: $('.four'), + sticky_presets: true, + earliest_date: '2000-01-01', + latest_date: moment(), + start_date: moment().subtract(29, 'days'), + end_date: moment(), + presets: [{ + label: 'Last 30 days', + start: moment().subtract(29, 'days'), + end: moment() + },{ + 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') + }], + callback: function() { + var start = moment(this.start_date).format('ll'), + end = moment(this.end_date).format('ll'), + preset = this.preset_label; + + console.debug('Start Date: ' + start + '\nEnd Date: ' + end + '\nPreset: ' + preset); } });