Permalink
Browse files

fixed broken demo

  • Loading branch information...
1 parent c405176 commit 843573e9ef89c93975b33e57801ecda7ca909c56 Karl Seguin committed Mar 19, 2012
@@ -15,14 +15,15 @@
<p>So the datePicker is available on <a href="https://github.com/karlseguin/jquery.dateRange/">github</a>. And here's what it looks like:</p>
- <link href="https://github.com/karlseguin/jquery.dateRange/raw/master/dateRange.css" media="screen" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="https://github.com/karlseguin/jquery.dateRange/raw/master/jquery.dateRange.js"></script>
+ <link href="/assets/forposts/dateRange/dateRange.css" media="screen" rel="stylesheet" type="text/css" />
+ <script src="/assets/forposts/dateRange/dateRange.js"></script>
-<p><input type="text" id="date" /></p>
+<p><input type="text" id="example" /></p>
<script type="text/javascript">
$(document).ready(function() {
- $('#date').dateRange({
+ console.log($('#example'))
+ $('#example').dateRange({
selected: function(dates) {
var from = dates[0];
var to = dates[1];
@@ -0,0 +1,9 @@
+div.calendarWrap{position:relative;}
+div.calendar{border:1px solid #e6e6e6;overflow:auto;background:#f0f0f0;position:absolute;line-height:1em;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px-moz-user-select:none;-webkit-user-select: none;-khtml-user-select: none;user-select: none;}
+div.calendar td.nav{cursor:pointer;background:#e6e6e6;width:25px;height:25px;text-align:center;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-weight:bold;}
+div.calendar td.nav:hover{background:#d6d6d6;}
+div.calendar table{float:left;margin:0;font-family:verdana;font-size:80%;}
+div.calendar table:first-child{border-right:1px solid #e6e6e6;margin-right:10px;padding-right:10px;}
+div.calendar table td{padding:3px;text-align:center;cursor:pointer;border:1px solid transparent;}
+div.calendar td.selected{border:1px dotted #222;}
+div.calendar td.highlight{background:#ccc;}
@@ -0,0 +1,213 @@
+(function($){
+ $.fn.dateRange = function(options)
+ {
+ var defaults = {selected: null, startWith: null, minimumDate: null, maximumDate: null};
+ var opts = $.extend({}, defaults, options);
+ var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
+ var abbreviations = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
+ var daySelector = 'td:not(.m):not(:empty)';
+ return this.each(function()
+ {
+ if (this.dateRange) { return false; }
+
+ var $input = $(this);
+ var $container, selecting, selected;
+ var self =
+ {
+ initialize: function()
+ {
+ $container = self.initializeContainer().hide();
+ $prev = $container.delegate('td.prev', 'click', self.loadPrevious);
+ $next = $container.delegate('td.next', 'click', self.loadNext);
+ var now = new Date();
+ now.setDate(1);
+ var prev = new Date(now.getFullYear(), now.getMonth()-1, 1);
+ $container.append(self.buildMonth(prev));
+ $container.append(self.buildMonth(now));
+ self.fixNav();
+
+ $input.click(function()
+ {
+ self.show();
+ return false;
+ }).keydown(function(e)
+ {
+ if (e.keyCode == 13) { self.entered(); }
+ });
+
+ $(document).keydown(function(e)
+ {
+ if (e.keyCode == 27) { self.hide(); }
+ }).click(self.hide);
+
+ $container.delegate(daySelector, 'click', self.clicked);
+ $container.click(function(){return false;});
+
+ if (opts.startWith != null)
+ {
+ selected = opts.startWith;
+ self.rangeSelected();
+ }
+ },
+ entered: function()
+ {
+ var values = $input.val().split('-');
+ if (values.length != 2) { return false; }
+
+ var from = self.parseDate(values[0].replace(/^\s*/, '').replace(/\s*$/, ''));
+ var to = self.parseDate(values[1].replace(/^\s*/, '').replace(/\s*$/, ''));
+ if (from == null || to == null) { return false; }
+
+ selected = [from, to];
+ self.rangeSelected();
+ return false;
+ },
+ parseDate: function(value)
+ {
+ return new Date(value);
+ },
+ show: function()
+ {
+ selecting = new Array();
+ $container.show();
+ },
+ hide: function()
+ {
+ $container.hide();
+ },
+ clicked: function()
+ {
+ var $td = $(this).addClass('selected');
+ var date = $td.closest('table').data('date');
+ selecting.push(new Date(date.getFullYear(), date.getMonth(), $td.text()));
+ if (selecting.length == 2)
+ {
+ selected = selecting;
+ self.rangeSelected();
+ }
+ },
+ rangeSelected: function()
+ {
+ if (selected[0] > selected[1])
+ {
+ var x = selected[0];
+ selected[0] = selected[1];
+ selected[1] = x;
+ }
+ $input.val(self.format(selected[0]) + ' - ' + self.format(selected[1]));
+ self.highlight($container.find('table:first'));
+ self.highlight($container.find('table:last'));
+ self.hide();
+ if (opts.selected != null) { opts.selected(selected); }
+ },
+ highlight: function($table)
+ {
+ if (selected == null || selected.length != 2) { return; }
+
+ $table.find('td.highlight').removeClass('highlight');
+ var startDate = $table.data('date');
+ var endDate = new Date(startDate.getFullYear(), startDate.getMonth()+1, 0);
+ if (startDate > selected[1] || endDate < selected[0]) { return; }
+
+ var $tds = $table.find(daySelector);
+ var start = selected[0].getMonth() < startDate.getMonth() || selected[0].getFullYear() < startDate.getFullYear() ? 0 : selected[0].getDate()-1;
+ var end = selected[1].getMonth() > endDate.getMonth() || selected[1].getFullYear() > endDate.getFullYear() ? $tds.length : selected[1].getDate();
+ for(var i = start; i < end; ++i)
+ {
+ $tds.get(i).className = 'highlight';
+ }
+ },
+ loadPrevious: function()
+ {
+ $container.children('table:eq(1)').remove();
+ var $remaining = $container.children('table')
+ var date = $remaining.data('date');
+ $remaining.before(self.buildMonth(new Date(date.getFullYear(), date.getMonth()-1, 1)));
+ self.fixNav();
+ },
+ loadNext: function()
+ {
+ $container.children('table:eq(0)').remove();
+ var $remaining = $container.children('table')
+ var date = $remaining.data('date');
+ $remaining.after(self.buildMonth(new Date(date.getFullYear(), date.getMonth()+1, 1)));
+ self.fixNav();
+ },
+ initializeContainer: function()
+ {
+ $input.wrap($('<div>').addClass('calendarWrap'));
+ var $container = $('<div>').addClass('calendar').insertAfter($input);
+ return $container;
+ },
+ buildMonth: function(date)
+ {
+ var first = new Date(date.getFullYear(), date.getMonth(), 1);
+ var last = new Date(date.getFullYear(), date.getMonth()+1, 0);
+ var firstDay = first.getDay();
+ var totalDays = last.getDate();
+ var weeks = Math.ceil((totalDays + firstDay) / 7);
+ var table = document.createElement('table');
+
+ for (var i = 0, count = 1; i < weeks; ++i)
+ {
+ var row = table.insertRow(-1);
+ for(var j = 0; j < 7; ++j, ++count)
+ {
+ var cell = row.insertCell(-1);
+ if (count > firstDay && count <= totalDays+firstDay)
+ {
+ cell.innerHTML = count - firstDay;
+ }
+ }
+ }
+ self.insertHeader(date, table);
+ var $table = $(table).data('date', date);
+ self.highlight($table);
+
+ if (opts.minimumDate && opts.minimumDate >= first) { self.prev().hide() } else { self.prev().show(); }
+ if (opts.maximumDate && opts.maximumDate <= last) { self.next().hide() } else { self.next().show(); }
+
+ return $table;
+ },
+ format: function(date)
+ {
+ return abbreviations[date.getMonth()] + ' ' + date.getDate() + ' ' + date.getFullYear();
+ },
+ insertHeader: function(date, table)
+ {
+ var header = table.insertRow(0);
+ var cell = header.insertCell(-1);
+ cell.className = 'm nav';
+
+ cell = header.insertCell(1);
+ cell.innerHTML = months[date.getMonth()] + ' ' + date.getFullYear();
+ cell.className = 'm'; //very stupid IE (all versions) fix
+ cell.colSpan = 5;
+
+ cell = header.insertCell(2);
+ cell.className = 'm nav';
+ },
+ prev: function()
+ {
+ return $container.find('div.prev');
+ },
+ next: function()
+ {
+ return $container.find('div.next');
+ },
+ fixNav: function()
+ {
+ var $first = $container.find('table:first tr:first');
+ $first.find('td:first').addClass('prev nav').html('&lsaquo;')
+ $first.find('td:last').removeClass('next nav').html('');
+
+ var $second = $container.find('table:last tr:first');
+ $second.find('td:first').removeClass('prev nav').html('')
+ $second.find('td:last').addClass('next nav').html('&rsaquo;');
+ }
+ };
+ this.dateRange = self;
+ self.initialize();
+ });
+ }
+})(jQuery);

0 comments on commit 843573e

Please sign in to comment.