bootstrap-daterangepicker-rails 0.0.3 → 0.0.5

data/lib/bootstrap-daterangepicker-rails/version.rb

@@ -1,7 +1,7 @@
 module Bootstrap
   module Daterangepicker
     module Rails
-      VERSION = '0.0.3'
+      VERSION = '0.0.5'
     end
   end
 end

data/vendor/assets/javascripts/date.js

@@ -142,4 +142,4 @@ return g._start.call({},s);};$D._parse=$D.parse;$D.parse=function(s){var r=null;
 if(s instanceof Date){return s;}
 try{r=$D.Grammar.start.call({},s.replace(/^\s*(\S*(\s+\S+)*)\s*$/,"$1"));}catch(e){return null;}
 return((r[1].length===0)?r[0]:null);};$D.getParseFunction=function(fx){var fn=$D.Grammar.formats(fx);return function(s){var r=null;try{r=fn.call({},s);}catch(e){return null;}
-return((r[1].length===0)?r[0]:null);};};$D.parseExact=function(s,fx){return $D.getParseFunction(fx)(s);};}());
+return((r[1].length===0)?r[0]:null);};};$D.parseExact=function(s,fx){return $D.getParseFunction(fx)(s);};}());

data/vendor/assets/javascripts/daterangepicker.js

@@ -1,7 +1,7 @@
 /**
-* @version: 1.0
+* @version: 1.1
 * @author: Dan Grossman http://www.dangrossman.info/
-* @date: 2012-08-20
+* @date: 2013-03-04
 * @copyright: Copyright (c) 2012 Dan Grossman. All rights reserved.
 * @license: Licensed under Apache License v2.0. See http://www.apache.org/licenses/LICENSE-2.0
 * @website: http://www.improvely.com/
@@ -9,7 +9,7 @@
 !function ($) {
 
     var DateRangePicker = function (element, options, cb) {
-        var hasOptions = typeof options == 'object'
+        var hasOptions = typeof options == 'object';
         var localeObject;
 
         //state
@@ -18,18 +18,28 @@
         this.minDate = false;
         this.maxDate = false;
         this.changed = false;
+        this.cleared = false;
+		this.showDropdowns = false;
         this.ranges = {};
+        this.dateLimit = false;
         this.opens = 'right';
         this.cb = function () { };
         this.format = 'MM/dd/yyyy';
+        this.separator = ' - ';
+        this.showWeekNumbers = false;
+        this.buttonClasses = ['btn-success'];
+        this.applyClass = 'btn btn-small btn-success';
+        this.clearClass = 'btn btn-small';
         this.locale = {
-            applyLabel:"Apply",
-            fromLabel:"From",
-            toLabel:"To",
-            customRangeLabel:"Custom Range",
-            daysOfWeek:['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
-            monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-            firstDay:0
+            applyLabel: 'Apply',
+            clearLabel:"Clear",
+            fromLabel: 'From',
+            toLabel: 'To',
+            weekLabel: 'W',
+            customRangeLabel: 'Custom Range',
+            daysOfWeek: Date.CultureInfo.shortestDayNames,
+            monthNames: Date.CultureInfo.monthNames,
+            firstDay: 0
         };
 
         localeObject = this.locale;
@@ -47,14 +57,26 @@
         //element that triggered the date range picker
         this.element = $(element);
 
+        //try parse date if in text input
+        if (!hasOptions || (typeof options.startDate == 'undefined' && typeof options.endDate == 'undefined')) {
+            if ($(this.element).is('input[type=text]')) {
+                var val = $(this.element).val();
+                var split = val.split(this.separator);
+                
+                if(split.length == 2) {
+                    this.startDate = Date.parseExact(split[0], this.format);
+                    this.endDate = Date.parseExact(split[1], this.format);
+                }
+            }
+        }
+
         if (this.element.hasClass('pull-right'))
             this.opens = 'left';
 
         if (this.element.is('input')) {
             this.element.on({
                 click: $.proxy(this.show, this),
-                focus: $.proxy(this.show, this),
-                blur: $.proxy(this.hide, this)
+                focus: $.proxy(this.show, this)
             });
         } else {
             this.element.on('click', $.proxy(this.show, this));
@@ -66,6 +88,14 @@
                     localeObject[property] = options.locale[property] || value;
                 });
             }
+
+            if (options.applyClass) {
+                this.applyClass = options.applyClass;
+            }
+
+            if (options.clearClass) {
+                this.clearClass = options.clearClass;
+            }
         }
 
         var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +
@@ -73,20 +103,20 @@
                 '<div class="calendar right"></div>' +
                 '<div class="ranges">' +
                   '<div class="range_inputs">' +
-                    '<div style="float: left">' +
+                    '<div class="daterangepicker_start_input" style="float: left">' +
                       '<label for="daterangepicker_start">' + this.locale.fromLabel + '</label>' +
                       '<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
                     '</div>' +
-                    '<div style="float: left; padding-left: 11px">' +
+                    '<div class="daterangepicker_end_input" style="float: left; padding-left: 11px">' +
                       '<label for="daterangepicker_end">' + this.locale.toLabel + '</label>' +
                       '<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
                     '</div>' +
-                    '<button class="btn btn-small btn-success" disabled="disabled">' + this.locale.applyLabel + '</button>' +
+                    '<button class="' + this.applyClass + ' applyBtn" disabled="disabled">' + this.locale.applyLabel + '</button>&nbsp;' +
+                    '<button class="' + this.clearClass + ' clearBtn">' + this.locale.clearLabel + '</button>' +
                   '</div>' +
                 '</div>' +
               '</div>';
 
-        //the date range picker
         this.container = $(DRPTemplate).appendTo('body');
 
         if (hasOptions) {
@@ -94,18 +124,20 @@
             if (typeof options.format == 'string')
                 this.format = options.format;
 
+            if (typeof options.separator == 'string')
+                this.separator = options.separator;
+
             if (typeof options.startDate == 'string')
-                this.startDate = Date.parse(options.startDate, this.format);
+                this.startDate = Date.parseExact(options.startDate, this.format);
 
             if (typeof options.endDate == 'string')
-                this.endDate = Date.parse(options.endDate, this.format);
+                this.endDate = Date.parseExact(options.endDate, this.format);
 
             if (typeof options.minDate == 'string')
-                this.minDate = Date.parse(options.minDate, this.format);
+                this.minDate = Date.parseExact(options.minDate, this.format);
 
             if (typeof options.maxDate == 'string')
-                this.maxDate = Date.parse(options.maxDate, this.format);
-
+                this.maxDate = Date.parseExact(options.maxDate, this.format);
 
             if (typeof options.startDate == 'object')
                 this.startDate = options.startDate;
@@ -159,6 +191,9 @@
                 list += '</ul>';
                 this.container.find('.ranges').prepend(list);
             }
+            
+            if (typeof options.dateLimit == 'object')
+                this.dateLimit = options.dateLimit;
 
             // update day names order to firstDay
             if (typeof options.locale == 'object') {
@@ -174,8 +209,31 @@
 
             if (typeof options.opens == 'string')
                 this.opens = options.opens;
+
+            if (typeof options.showWeekNumbers == 'boolean') {
+                this.showWeekNumbers = options.showWeekNumbers;
+            }
+
+            if (typeof options.buttonClasses == 'string') {
+                this.buttonClasses = [options.buttonClasses];
+            }
+
+            if (typeof options.buttonClasses == 'object') {
+                this.buttonClasses = options.buttonClasses;
+            }
+			
+            if (typeof options.showDropdowns == 'boolean') {
+                this.showDropdowns = options.showDropdowns;
+            }
+
         }
 
+        //apply CSS classes to buttons
+        var c = this.container;
+        $.each(this.buttonClasses, function (idx, val) {
+            c.find('button').addClass(val);
+        });
+
         if (this.opens == 'right') {
             //swap calendar positions
             var left = this.container.find('.calendar.left');
@@ -196,7 +254,8 @@
         this.container.on('mousedown', $.proxy(this.mousedown, this));
         this.container.find('.calendar').on('click', '.prev', $.proxy(this.clickPrev, this));
         this.container.find('.calendar').on('click', '.next', $.proxy(this.clickNext, this));
-        this.container.find('.ranges').on('click', 'button', $.proxy(this.clickApply, this));
+        this.container.find('.ranges').on('click', 'button.applyBtn', $.proxy(this.clickApply, this));
+        this.container.find('.ranges').on('click', 'button.clearBtn', $.proxy(this.clickClear, this));
 
         this.container.find('.calendar').on('click', 'td.available', $.proxy(this.clickDate, this));
         this.container.find('.calendar').on('mouseenter', 'td.available', $.proxy(this.enterDate, this));
@@ -205,6 +264,9 @@
         this.container.find('.ranges').on('click', 'li', $.proxy(this.clickRange, this));
         this.container.find('.ranges').on('mouseenter', 'li', $.proxy(this.enterRange, this));
         this.container.find('.ranges').on('mouseleave', 'li', $.proxy(this.updateView, this));
+		
+        this.container.find('.calendar').on('change', 'select.yearselect', $.proxy(this.updateYear, this));
+        this.container.find('.calendar').on('change', 'select.monthselect', $.proxy(this.updateMonth, this));
 
         this.element.on('keyup', $.proxy(this.updateFromControl, this));
 
@@ -217,9 +279,12 @@
 
         constructor: DateRangePicker,
 
-        mousedown: function (e) {
+        mousedown: function (e) {		
             e.stopPropagation();
-            e.preventDefault();
+			
+			//allow select list to function normally
+			if(!this.showDropdowns || $(e.target).not('select').length)
+				e.preventDefault();
         },
 
         updateView: function () {
@@ -230,16 +295,16 @@
             this.container.find('input[name=daterangepicker_end]').val(this.endDate.toString(this.format));
 
             if (this.startDate.equals(this.endDate) || this.startDate.isBefore(this.endDate)) {
-                this.container.find('button').removeAttr('disabled');
+                this.container.find('button.applyBtn').removeAttr('disabled');
             } else {
-                this.container.find('button').attr('disabled', 'disabled');
+                this.container.find('button.applyBtn').attr('disabled', 'disabled');
             }
         },
 
         updateFromControl: function () {
             if (!this.element.is('input')) return;
 
-            var dateString = this.element.val().split(" - ");
+            var dateString = this.element.val().split(this.separator);
             var start = Date.parseExact(dateString[0], this.format);
             var end = Date.parseExact(dateString[1], this.format);
 
@@ -255,12 +320,17 @@
         },
 
         notify: function () {
-            this.updateView();
+            if (!this.cleared) {
+              this.updateView();
+            }
 
             if (this.element.is('input')) {
-                this.element.val(this.startDate.toString(this.format) + ' - ' + this.endDate.toString(this.format));
+                this.element.val(this.cleared ? '' : this.startDate.toString(this.format) + this.separator + this.endDate.toString(this.format));
             }
-            this.cb(this.startDate, this.endDate);
+            var arg1 = (this.cleared ? null : this.startDate),
+                arg2 = (this.cleared ? null : this.endDate);
+            this.cleared = false;
+            this.cb(arg1,arg2);
         },
 
         move: function () {
@@ -289,6 +359,8 @@
             }
 
             this.changed = false;
+            
+            this.element.trigger('shown',{target:e.target,picker:this});
 
             $(document).on('mousedown', $.proxy(this.hide, this));
         },
@@ -379,9 +451,34 @@
             if (cal.hasClass('left')) {
                 startDate = this.leftCalendar.calendar[row][col];
                 endDate = this.endDate;
+                if (typeof this.dateLimit == 'object') {
+                    var maxDate = new Date(startDate).add(this.dateLimit);
+                    if (endDate.isAfter(maxDate)) {
+                        endDate = maxDate;
+                    }
+                }
+                this.element.trigger('clicked', {
+                  dir: 'left',
+                  picker: this
+                });
             } else {
                 startDate = this.startDate;
                 endDate = this.rightCalendar.calendar[row][col];
+                if (typeof this.dateLimit == 'object') {
+                    var negConfig = {
+                        days: 0 - this.dateLimit.days,
+                        months: 0 - this.dateLimit.months,
+                        years: 0 - this.dateLimit.years
+                    };
+                    var minDate = new Date(endDate).add(negConfig);
+                    if (startDate.isBefore(minDate)) {
+                        startDate = minDate;
+                    }
+                }                
+                this.element.trigger('clicked', {
+                  dir: 'right',
+                  picker: this
+                });
             }
 
             cal.find('td').removeClass('active');
@@ -392,6 +489,11 @@
                     this.changed = true;
                 this.startDate = startDate;
                 this.endDate = endDate;
+            } else if (startDate.isAfter(endDate)) {
+                $(e.target).addClass('active');
+                this.changed = true;
+                this.startDate = startDate;
+                this.endDate = startDate.clone().add(1).days();
             }
 
             this.leftCalendar.month.set({ month: this.startDate.getMonth(), year: this.startDate.getFullYear() });
@@ -403,11 +505,58 @@
             this.hide();
         },
 
+        clickClear: function (e) {
+            this.changed = true;
+            this.cleared = true;
+            this.hide();
+        },
+		
+		updateYear: function(e) {
+			var year = parseInt($(e.target).val());
+			var isLeft = $(e.target).closest('.calendar').hasClass('left');
+			
+			if(isLeft) {
+				this.leftCalendar.month.set({ month: this.startDate.getMonth(), year: year });
+			} else { 
+				this.rightCalendar.month.set({ month: this.endDate.getMonth(), year: year });
+			}
+			
+            this.updateCalendars();
+		},
+		
+		updateMonth: function(e) {
+			var month = parseInt($(e.target).val());
+			var isLeft = $(e.target).closest('.calendar').hasClass('left');
+			
+			if(isLeft) {
+				this.leftCalendar.month.set({ month: month, year: this.startDate.getFullYear() });
+			} else {
+				this.rightCalendar.month.set({ month: month, year: this.endDate.getFullYear() });
+			}
+			
+            this.updateCalendars();
+		},
+
         updateCalendars: function () {
             this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.getMonth(), this.leftCalendar.month.getFullYear());
             this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.getMonth(), this.rightCalendar.month.getFullYear());
-            this.container.find('.calendar.left').html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.endDate));
+            this.container.find('.calendar.left').html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate));
             this.container.find('.calendar.right').html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.startDate, this.maxDate));
+
+            this.container.find('.ranges li').removeClass('active');
+            var customRange = true;
+            var i = 0;
+            for (var range in this.ranges) {
+                if (this.startDate.equals(this.ranges[range][0]) && this.endDate.equals(this.ranges[range][1])) {
+                    customRange = false;
+                    this.container.find('.ranges li:eq(' + i + ')').addClass('active');
+                }
+                i++;
+            }
+            if (customRange)
+                this.container.find('.ranges li:last').addClass('active');
+
+            this.element.trigger('updated', this);
         },
 
         buildCalendar: function (month, year) {
@@ -447,11 +596,47 @@
             return calendar;
 
         },
+		
+		renderDropdowns: function (selected, minDate, maxDate) {						
+			var currentMonth = selected.getMonth();
+			var monthHtml = '<select class="monthselect">';
+			var inMinYear = false;
+			var inMaxYear = false;
+			
+			for (var m = 0; m < 12; m++) {
+				if ((!inMinYear || m >= minDate.getMonth()) && (!inMaxYear || m <= maxDate.getMonth())) {
+					monthHtml += "<option value='" + m + "'" +
+						(m === currentMonth ? " selected='selected'" : "") +
+						">" + this.locale.monthNames[m] + "</option>";
+				}
+			}
+			monthHtml += "</select>";
+			
+			var currentYear = selected.getFullYear();
+			var maxYear = (maxDate && maxDate.getFullYear()) || (currentYear + 5);
+			var minYear = (minDate && minDate.getFullYear()) || (currentYear - 50); 
+			var yearHtml = '<select class="yearselect">'
+			
+			for(var y = minYear; y <= maxYear; y++) {
+				yearHtml += '<option value="' + y + '"' +
+						(y === currentYear ? ' selected="selected"' : '') +
+						'>' + y + '</option>';
+			}
+			
+			yearHtml += '</select>';
+			
+			return monthHtml + yearHtml;
+		},
 
         renderCalendar: function (calendar, selected, minDate, maxDate) {
             var html = '<table class="table-condensed">';
             html += '<thead>';
             html += '<tr>';
+            
+            // add empty cell for week number
+            if (this.showWeekNumbers)
+                html += '<th></th>';
+            
             if (!minDate || minDate < calendar[1][1])
             {
                 html += '<th class="prev available"><i class="icon-arrow-left"></i></th>';
@@ -460,7 +645,14 @@
             {
                  html += '<th></th>';
             }
-            html += '<th colspan="5">' + this.locale.monthNames[calendar[1][1].getMonth()] + calendar[1][1].toString(" yyyy") + '</th>';
+			
+			var dateHtml = this.locale.monthNames[calendar[1][1].getMonth()] + calendar[1][1].toString(" yyyy");
+			
+			if(this.showDropdowns) {
+				dateHtml = this.renderDropdowns(calendar[1][1], minDate, maxDate);
+			}
+			
+            html += '<th colspan="5" style="width: auto">' + dateHtml + '</th>';
             if (!maxDate || maxDate > calendar[1][1])
             {
                 html += '<th class="next available"><i class="icon-arrow-right"></i></th>';
@@ -472,6 +664,10 @@
 
             html += '</tr>';
             html += '<tr>';
+            
+            // add week number label
+            if (this.showWeekNumbers)
+                html += '<th class="week">' + this.locale.weekLabel + '</th>';
 
             $.each(this.locale.daysOfWeek, function (index, dayOfWeek) {
                 html += '<th>' + dayOfWeek + '</th>';
@@ -483,6 +679,11 @@
 
             for (var row = 0; row < 6; row++) {
                 html += '<tr>';
+                
+                // add week number
+                if (this.showWeekNumbers)
+                    html += '<td class="week">' + calendar[row][0].getWeek() + '</td>';
+                
                 for (var col = 0; col < 7; col++) {
                     var cname = 'available ';
                     cname += (calendar[row][col].getMonth() == calendar[1][1].getMonth()) ? '' : 'off';
@@ -492,15 +693,23 @@
 
                     if ( (minDate && calendar[row][col] < minDate) || (maxDate && calendar[row][col] > maxDate))
                     {
-                        cname = 'off disabled';
+                        cname = ' off disabled ';
                     }
                     else if (calendar[row][col].equals(selected))
                     {
-                        cname += 'active';
+                        cname += ' active ';
+                        if (calendar[row][col].equals(this.startDate)) { cname += ' start-date '; }
+                        if (calendar[row][col].equals(this.endDate)) { cname += ' end-date '; }
+                    }
+                    else if (calendar[row][col] >= this.startDate && calendar[row][col] <= this.endDate)
+                    {
+                        cname += ' in-range ';
+                        if (calendar[row][col].equals(this.startDate)) { cname += ' start-date '; }
+                        if (calendar[row][col].equals(this.endDate)) { cname += ' end-date '; }
                     }
                     
                     var title = 'r' + row + 'c' + col;
-                    html += '<td class="' + cname + '" title="' + title + '">' + calendar[row][col].getDate() + '</td>';
+                    html += '<td class="' + cname.replace(/\s+/g,' ').replace(/^\s?(.*?)\s?$/,'$1') + '" title="' + title + '">' + calendar[row][col].getDate() + '</td>';
                 }
                 html += '</tr>';
             }

data/vendor/assets/stylesheets/daterangepicker.css

@@ -17,13 +17,23 @@
   text-align: left;
 }
 
+.daterangepicker .ranges .range_inputs>div {
+  float: left;
+}
+
+.daterangepicker .ranges .range_inputs>div:nth-child(2) {
+  padding-left: 11px;
+}
+
 .daterangepicker .calendar {
   display: none;
   max-width: 230px;
 }
 
 .daterangepicker .calendar th, .daterangepicker .calendar td {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  white-space: nowrap;
+  text-align: center;
 }
 
 .daterangepicker .ranges label {
@@ -147,6 +157,7 @@
 .daterangepicker td.off {
   color: #999;
 }
+
 .daterangepicker td.disabled {
   color: #999;
 }
@@ -155,6 +166,13 @@
   background: #eee;
 }
 
+.daterangepicker td.in-range {
+  background: #ebf4f8;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+
 .daterangepicker td.active, .daterangepicker td.active:hover {
   background-color: #006dcc;
   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
@@ -171,3 +189,25 @@
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-daterangepicker-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-30 00:00:00.000000000 Z
+date: 2013-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -80,7 +80,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
 summary: Rails 3.2.x plugin to allow for the easy use of Dan Grossman's Bootstrap