Preserve and display preset titles

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('<li class="dr-list-item">'+ d.label +
+        ul_presets.append('<li class="dr-list-item" data-label="' + d.label + '">'+ d.label +
           '<span class="dr-item-aside" data-start="'+ startISO +'" data-end="'+ endISO +'">'+ string +'</span>'+
         '</li>');
       }
     });
-
+    ul_presets.append('<li class="dr-list-item" data-label="custom">Custom</li>');
     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 @@
           '<div class="dr-date dr-date-start" contenteditable>'+ moment(this.start_date).format(this.format.input) +'</div>' +
           '<span class="dr-dates-dash">&ndash;</span>' +
           '<div class="dr-date dr-date-end" contenteditable>'+ moment(this.end_date).format(this.format.input) +'</div>' +
+          '<div class="dr-date dr-date-preset" style="display: none">' + '</div>' +
         '</div>' +
 
         (this.presets ? '<div class="dr-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');
     }

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);
   }
 });

public/index.html

@@ -21,6 +21,8 @@ <h1><a href="https://baremetrics.com">Baremetrics</a> Date Range Picker</h1>
 
   <div class="daterange daterange--double three"></div>
 
+  <div class="daterange daterange--double four"></div>
+
   <div class="daterange daterange--single"></div>
 
   <footer>