Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 2 commits
  • 7 files changed
  • 0 commit comments
  • 1 contributor
Showing with 311 additions and 168 deletions.
  1. +5 −0 Makefile
  2. +6 −2 jquery.day.css
  3. +185 −162 jquery.day.js
  4. +91 −0 jquery.day.less
  5. +11 −0 jquery.day.min.css
  6. +1 −0 jquery.day.min.js
  7. +12 −4 test.html
View
5 Makefile
@@ -0,0 +1,5 @@
+day:
+ lessc jquery.day.less > jquery.day.min.css
+ uglifyjs -nc jquery.day.js > jquery.day.min.js
+
+.PHONY: day
View
8 jquery.day.css
@@ -13,7 +13,7 @@
position: absolute;
font-family: Helvetica;
- font-size: 0.75em;
+ font-size: 12px;
color: #555;
}
@@ -26,9 +26,14 @@
font-weight: 600;
}
+.popup_day_selector table {
+ font-size: 12px;
+}
+
.popup_day_selector table thead .day_header th {
color: #333;
font-weight: 600;
+ text-align: center;
}
.popup_day_selector .date_prev {
@@ -63,7 +68,6 @@
.popup_day_selector tbody td {
padding: 5px;
- /*border: 1px solid #eee;*/
text-align: center;
cursor: pointer;
}
View
347 jquery.day.js
@@ -1,199 +1,222 @@
/**
* Day - A jQuery date picker
*
- * Copyright (C) 2011 by Markus Eliasson
+ * Copyright (C) 2012 by Markus Eliasson
*
* Licensed under the MIT license
*/
-(function($){
+(function($) {
+
$.fn.day = function(callback) {
- var picker = undefined;
- var current_date = new Date();
- var current_year = current_date.getFullYear();
- var current_month = current_date.getMonth();
- var current_day = current_date.getDay();
-
- var month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
- var weekday_names = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
- var visible = false;
-
- is_leap = function(year) {
- return (((year % 4 === 0) && (year % 100 !== 0)) ||
- (year % 400 === 0));
- };
-
- days_in_month = function(year, month) {
- if(month === 1) {
- return is_leap(year) ? 29 : 28;
- }
- else {
- var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- return days[month];
+ $.fn.day.month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ $.fn.day.weekday_names = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
+
+ return this.each(function() {
+ var $this = $(this),
+ data = $this.data('daydata');
+
+ if(!data) {
+ var current_date = new Date();
+ data = {
+ current_date : new Date(),
+ current_year : current_date.getFullYear(),
+ current_month : current_date.getMonth(),
+ visible : false
+ };
+ $this.data('daydata', data);
}
- };
- generate_picker = function() {
- var p1 = '<div class="popup_day_selector"><table><thead><tr class="day_header"><td><a href="#" class="date_prev">&lt;</a></td>';
- var p2 = '<th colspan="5" class="day_month">{0}</th>';
- var p3 = '<td><a href="#" class="date_next">&gt;</a></td></tr><tr>';
- var p4 = '<th>{0}</th>';
- var p6 = '</tr></thead><tbody><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>';
+ $(this).click(function() {
+ console.log("Click");
+ if($.fn.day.picker !== undefined) {
+ $($.fn.day.picker).fadeOut('fast', function() {
+ $($.fn.day.picker).remove();
+ visible = false;
+ });
+ }
- var p7 = '</tbody></table></div>';
+ event.stopPropagation();
- var header = month_names[current_month] + ' ' + current_year;
- var picker_code = p1 + format_string(p2, header) + p3;
- for(var i = 0; i < weekday_names.length; i++) {
- picker_code += format_string(p4, weekday_names[i]);
- }
- picker_code += p6 + p7;
- return picker_code;
- };
-
- show_picker = function(source) {
- var picker_code = generate_picker();
- $(source).after(picker_code);
- var picker = $(source).siblings('.popup_day_selector');
- update_picker(picker);
-
-
- // Position the picker
- var position = $(source).position();
- var top = position.top - 40;
- var left = position.left + $(source).width() + 10;
- picker.css({
- 'top': top,
- 'left': left
- }).fadeIn('fast');
- visible = true;
-
- // Attach event listeners
- picker.find('a.date_prev').click(function() {
- if(current_month > 0) {
- current_month--;
- }
- else {
- current_month = 11;
- current_year--;
- }
- current_date = new Date(current_year, current_month, 1);
- update_picker(picker);
- });
+ $.fn.day.picker = build_picker_markup($this, data, callback);
- picker.find('a.date_next').click(function() {
- if(current_month < 11) {
- current_month++;
- }
- else {
- current_month = 0;
- current_year++;
- }
- current_date = new Date(current_year, current_month, 1);
- update_picker(picker);
+ $.fn.day.picker.click(function(event){
+ event.stopPropagation();
+ });
+
+ $('html').click(function() {
+ $($.fn.day.picker).fadeOut('fast', function() {
+ $($.fn.day.picker).remove();
+ data.visible = false;
+ });
+ });
});
- return picker;
- };
+ });
+ };
- update_picker = function(root) {
- // Construct a new date object used for drawing this month
- var current_calendar_date = new Date(current_date.getFullYear(), current_date.getMonth(), 1);
+ is_leap = function(year) {
+ return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
+ };
- // Update year and month
- var m = root.find('th.day_month');
- m.html(month_names[current_month] + ' ' + current_year);
+ days_in_month = function(year, month) {
+ if(month === 1) {
+ return is_leap(year) ? 29 : 28;
+ }
+ else {
+ var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+ return days[month];
+ }
+ };
- var month_starts_at_day = current_calendar_date.getDay() - 1;
- if(month_starts_at_day === -1) { // Sundays
- month_starts_at_day = 6;
- }
+ build_picker_markup = function(self, data, callback) {
+ var p1 = '<div class="popup_day_selector"><table><thead><tr class="day_header"><td><a href="#" class="date_prev">&lt;</a></td>',
+ p2 = '<th colspan="5" class="day_month">{0}</th>',
+ p3 = '<td><a href="#" class="date_next">&gt;</a></td></tr><tr>',
+ p4 = '<th>{0}</th>',
+ p6 = '</tr></thead><tbody><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>',
+ p7 = '</tbody></table></div>';
- var nr_days_in_month = days_in_month(current_year, current_month);
- var nr_days_in_prev_month = days_in_month(current_calendar_date.getMonth() ? current_calendar_date.getFullYear() : current_calendar_date.getFullYear() -1,
- current_calendar_date.getMonth() ? current_calendar_date.getMonth() -1 : current_calendar_date.getMonth());
+ var header = $.fn.day.month_names[data.current_month] + ' ' + data.current_year
+ picker_code = p1 + format_string(p2, header) + p3;
- // How many days from the previous month do we need to draw?
- var remaining_days = month_starts_at_day;
+ for(var i = 0; i < $.fn.day.weekday_names.length; i++) {
+ picker_code += format_string(p4, $.fn.day.weekday_names[i]);
+ }
- var days_to_draw = [];
+ picker_code += p6 + p7;
- // Push the last remaining days from last month to days
- for(var i = remaining_days; i > 0; i--) {
- days_to_draw.push(nr_days_in_prev_month - i + 1);
- }
+ $(self).after(picker_code);
+
+ var picker = $(self).siblings('.popup_day_selector');
+ update_picker(picker, data, callback);
+
+ data.visible = true;
- // Add the days for this month
- for(var i = 0; i < nr_days_in_month; i++) {
- days_to_draw.push(i + 1);
+ // Attach event listeners
+ picker.find('a.date_prev').click(function() {
+ if(data.current_month > 0) {
+ data.current_month--;
+ }
+ else {
+ data.current_month = 11;
+ data.current_year--;
}
+ data.current_date = new Date(data.current_year, data.current_month, 1);
+ update_picker(picker, data, callback);
+ });
- // Add the visible days for next month (total calendar month is 5x7=35)
- var extra_days = 0;
- while((days_to_draw.length % 7) != 0) {
- days_to_draw.push(++extra_days);
+ picker.find('a.date_next').click(function() {
+ if(data.current_month < 11) {
+ data.current_month++;
+ }
+ else {
+ data.current_month = 0;
+ data.current_year++;
}
+ data.current_date = new Date(data.current_year, data.current_month, 1);
+ update_picker(picker, data, callback);
+ });
- var tbody = root.find('tbody');
- tbody.empty();
- tbody.append('<tr></tr>');
+ self.data('daydata', data);
+ return picker;
+ };
- for(var i = 0; i < days_to_draw.length; i++) {
- if( (i % 7) === 0) {
- if(i < days_to_draw.length) {
- tbody.append('<tr></tr>');
- }
- }
- var day_class = '';
- if((i < remaining_days) || (i >= (nr_days_in_month + remaining_days))) {
- day_class = 'date_off';
- }
- var cell = tbody.find('tr:last').append(format_string('<td class="{0}">{1}</td>', day_class, days_to_draw[i])).find('td:last');
- cell.click(select_date);
- }
- };
+ update_picker = function(root, data, callback) {
+ // Construct a new date object used for drawing this month
+ var current_calendar_date = new Date(data.current_date.getFullYear(), data.current_date.getMonth(), 1);
- select_date = function() {
- var selected_day =$(this).text();
- var date = new Date(current_date.getFullYear(), current_date.getMonth(), selected_day);
+ // Update year and month
+ var m = root.find('th.day_month');
+ m.html($.fn.day.month_names[data.current_month] + ' ' + data.current_year);
- $(picker).fadeOut('fast', function() {
- $(picker).remove();
- visible = false;
- callback(date);
- });
- };
-
- format_string = function() {
- var formatted = arguments[0];
- var args = Array.prototype.slice.call(arguments, 1);
- for(var i = 0; i < args.length; i++) {
- var regexp = new RegExp('\\{'+i+'\\}', 'gi');
- formatted = formatted.replace(regexp, args[i]);
- }
- return formatted;
+ var month_starts_at_day = current_calendar_date.getDay() - 1;
+ if(month_starts_at_day === -1) { // Sundays
+ month_starts_at_day = 6;
}
- // Add functionality to all datepickers
- return this.each(function() {
- source = this;
+ var nr_days_in_month = days_in_month(data.current_year, data.current_month);
+ var nr_days_in_prev_month = days_in_month(current_calendar_date.getMonth() ? current_calendar_date.getFullYear() : current_calendar_date.getFullYear() -1,
+ current_calendar_date.getMonth() ? current_calendar_date.getMonth() -1 : current_calendar_date.getMonth());
- // Launch calendar when clicked
- $(source).click(function(event) {
- event.stopPropagation();
+ // How many days from the previous month do we need to draw?
+ var remaining_days = month_starts_at_day;
- picker = show_picker(source);
+ var days_to_draw = [];
- // Hide picker on click outside picker area
- picker.click(function(event){
- event.stopPropagation();
- });
- $('html').click(function() {
- $(picker).fadeOut('fast', function() {
- $(picker).remove();
- visible = false;
- });
- });
+ // Push the last remaining days from last month to days
+ for(var i = remaining_days; i > 0; i--) {
+ days_to_draw.push(nr_days_in_prev_month - i + 1);
+ }
+
+ // Add the days for this month
+ for(var i = 0; i < nr_days_in_month; i++) {
+ days_to_draw.push(i + 1);
+ }
+ // Add the visible days for next month (total calendar month is 5x7=35)
+ var extra_days = 0;
+ while((days_to_draw.length % 7) != 0) {
+ days_to_draw.push(++extra_days);
+ }
+
+ var tbody = root.find('tbody');
+ tbody.empty();
+ tbody.append('<tr></tr>');
+
+ for(var i = 0; i < days_to_draw.length; i++) {
+ if( (i % 7) === 0) {
+ if(i < days_to_draw.length) {
+ tbody.append('<tr></tr>');
+ }
+ }
+ var day_class = '';
+ if((i < remaining_days) || (i >= (nr_days_in_month + remaining_days))) {
+ day_class = 'date_off';
+ }
+ var cell = tbody.find('tr:last').append(format_string('<td class="{0}">{1}</td>', day_class, days_to_draw[i])).find('td:last');
+ cell.click(function() {
+ var selected_day = $(this).text();
+ if($(this).hasClass('date_off')) {
+ if(parseInt(selected_day) > 15) { // previous month
+ if(data.current_month > 0) {
+ data.current_month--;
+ }
+ else {
+ data.current_month = 11;
+ data.current_year--;
+ }
+ }
+ else {
+ if(data.current_month < 11) {
+ data.current_month++;
+ }
+ else {
+ data.current_month = 0;
+ data.current_year++;
+ }
+ }
+ data.current_date = new Date(data.current_year, data.current_month, 1);
+ }
+
+ var date = new Date(data.current_date.getFullYear(), data.current_date.getMonth(), selected_day);
+
+ $($.fn.day.picker).fadeOut('fast', function() {
+ $($.fn.day.picker).remove();
+ data.visible = false;
+ callback(date);
+ });
});
- });
+ }
};
+
+ function format_string() {
+ var formatted = arguments[0],
+ args = Array.prototype.slice.call(arguments, 1);
+
+ for(var i = 0; i < args.length; i++) {
+ var regexp = new RegExp('\\{'+i+'\\}', 'gi');
+ formatted = formatted.replace(regexp, args[i]);
+ }
+ return formatted;
+ };
+
})(jQuery);
View
91 jquery.day.less
@@ -0,0 +1,91 @@
+/**
+ * Day - A jQuery date picker
+ *
+ * Copyright (C) 2011 by Markus Eliasson
+ *
+ * Licensed under the MIT license
+ */
+.popup_day_selector {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-shadow: 2px 2px 3px #666;
+ position: absolute;
+
+ font-family: Helvetica;
+ font-size: 12px;
+ color: #555;
+
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+
+ a,
+ a:active,
+ a:visited,
+ a:hover {
+ text-decoration: none;
+ color: #333;
+ font-weight: 600;
+ }
+
+ table {
+ font-size: 12px;
+ background-color: #fff;
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-weight: normal;
+
+ th {
+ font-weight: normal;
+ padding: 5px;
+ }
+
+ thead .day_header th {
+ color: #333;
+ font-weight: 600;
+ text-align: center;
+ }
+
+ thead {
+ background-color: #efefef;
+ }
+
+ tbody {
+ background-color: #fff;
+ }
+
+ tbody td {
+ padding: 5px;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ tbody td:hover {
+ background-color: #dedede;
+ }
+
+ tbody .date_off {
+ color: #aaa;
+ }
+
+ tbody .date_selected {
+ background-color: #efefef;
+ color: #555;
+ font-weight: bolder;
+ }
+ }
+
+ .date_prev {
+ float: left;
+ padding-left: 5px;
+ }
+
+ .date_next {
+ float: right;
+ padding-right: 5px;
+ }
+}
View
11 jquery.day.min.css
@@ -0,0 +1,11 @@
+.popup_day_selector{background-color:#fff;border:1px solid #ccc;border-radius:5px;box-shadow:2px 2px 3px #666;position:absolute;font-family:Helvetica;font-size:12px;color:#555;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.popup_day_selector a,.popup_day_selector a:active,.popup_day_selector a:visited,.popup_day_selector a:hover{text-decoration:none;color:#333;font-weight:600;}
+.popup_day_selector table{font-size:12px;background-color:#fff;border-collapse:collapse;border-spacing:0;font-weight:normal;}.popup_day_selector table th{font-weight:normal;padding:5px;}
+.popup_day_selector table thead .day_header th{color:#333;font-weight:600;text-align:center;}
+.popup_day_selector table thead{background-color:#efefef;}
+.popup_day_selector table tbody{background-color:#fff;}
+.popup_day_selector table tbody td{padding:5px;text-align:center;cursor:pointer;}
+.popup_day_selector table tbody td:hover{background-color:#dedede;}
+.popup_day_selector table tbody .date_off{color:#aaa;}
+.popup_day_selector table tbody .date_selected{background-color:#efefef;color:#555;font-weight:bolder;}
+.popup_day_selector .date_prev{float:left;padding-left:5px;}
+.popup_day_selector .date_next{float:right;padding-right:5px;}
View
1 jquery.day.min.js
@@ -0,0 +1 @@
+(function(a){function b(){var a=arguments[0],b=Array.prototype.slice.call(arguments,1);for(var c=0;c<b.length;c++){var d=new RegExp("\\{"+c+"\\}","gi");a=a.replace(d,b[c])}return a}a.fn.day=function(b){return a.fn.day.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],a.fn.day.weekday_names=["MO","TU","WE","TH","FR","SA","SU"],this.each(function(){var c=a(this),d=c.data("daydata");if(!d){var e=new Date;d={current_date:new Date,current_year:e.getFullYear(),current_month:e.getMonth(),visible:!1},c.data("daydata",d)}a(this).click(function(){console.log("Click"),a.fn.day.picker!==undefined&&a(a.fn.day.picker).fadeOut("fast",function(){a(a.fn.day.picker).remove(),visible=!1}),event.stopPropagation(),a.fn.day.picker=build_picker_markup(c,d,b),a.fn.day.picker.click(function(a){a.stopPropagation()}),a("html").click(function(){a(a.fn.day.picker).fadeOut("fast",function(){a(a.fn.day.picker).remove(),d.visible=!1})})})})},is_leap=function(a){return a%4===0&&a%100!==0||a%400===0},days_in_month=function(a,b){if(b===1)return is_leap(a)?29:28;var c=[31,28,31,30,31,30,31,31,30,31,30,31];return c[b]},build_picker_markup=function(c,d,e){var f='<div class="popup_day_selector"><table><thead><tr class="day_header"><td><a href="#" class="date_prev">&lt;</a></td>',g='<th colspan="5" class="day_month">{0}</th>',h='<td><a href="#" class="date_next">&gt;</a></td></tr><tr>',i="<th>{0}</th>",j="</tr></thead><tbody><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>",k="</tbody></table></div>",l=a.fn.day.month_names[d.current_month]+" "+d.current_year;picker_code=f+b(g,l)+h;for(var m=0;m<a.fn.day.weekday_names.length;m++)picker_code+=b(i,a.fn.day.weekday_names[m]);picker_code+=j+k,a(c).after(picker_code);var n=a(c).siblings(".popup_day_selector");return update_picker(n,d,e),d.visible=!0,n.find("a.date_prev").click(function(){d.current_month>0?d.current_month--:(d.current_month=11,d.current_year--),d.current_date=new Date(d.current_year,d.current_month,1),update_picker(n,d,e)}),n.find("a.date_next").click(function(){d.current_month<11?d.current_month++:(d.current_month=0,d.current_year++),d.current_date=new Date(d.current_year,d.current_month,1),update_picker(n,d,e)}),c.data("daydata",d),n},update_picker=function(c,d,e){var f=new Date(d.current_date.getFullYear(),d.current_date.getMonth(),1),g=c.find("th.day_month");g.html(a.fn.day.month_names[d.current_month]+" "+d.current_year);var h=f.getDay()-1;h===-1&&(h=6);var i=days_in_month(d.current_year,d.current_month),j=days_in_month(f.getMonth()?f.getFullYear():f.getFullYear()-1,f.getMonth()?f.getMonth()-1:f.getMonth()),k=h,l=[];for(var m=k;m>0;m--)l.push(j-m+1);for(var m=0;m<i;m++)l.push(m+1);var n=0;while(l.length%7!=0)l.push(++n);var o=c.find("tbody");o.empty(),o.append("<tr></tr>");for(var m=0;m<l.length;m++){m%7===0&&m<l.length&&o.append("<tr></tr>");var p="";if(m<k||m>=i+k)p="date_off";var q=o.find("tr:last").append(b('<td class="{0}">{1}</td>',p,l[m])).find("td:last");q.click(function(){var b=a(this).text();a(this).hasClass("date_off")&&(parseInt(b)>15?d.current_month>0?d.current_month--:(d.current_month=11,d.current_year--):d.current_month<11?d.current_month++:(d.current_month=0,d.current_year++),d.current_date=new Date(d.current_year,d.current_month,1));var c=new Date(d.current_date.getFullYear(),d.current_date.getMonth(),b);a(a.fn.day.picker).fadeOut("fast",function(){a(a.fn.day.picker).remove(),d.visible=!1,e(c)})})}}})(jQuery);
View
16 test.html
@@ -5,20 +5,28 @@
<meta name="description" content="Testbed for date picker" />
<title>A date-picker plugin for jQuery</title>
- <link rel="stylesheet" href="jquery.day.css">
+ <link rel="stylesheet" href="jquery.day.min.css">
</head>
<body>
<h1>Test</h1>
- <a href="#" class="select_date">Select a date</a>
+ <a href="#" id="select_date">Select a date</a>
<div id="result"></div>
+ <br/>
+
+ <a href="#" id="another_date">Select another date</a>
+ <div id="another_result"></div>
+ <br/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="jquery.day.js"></script>
+ <script type="text/javascript" src="jquery.day.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
- $('.select_date').day(function(date) {
+ $('#select_date').day(function(date) {
jQuery('#result').append('<p>Selected date: ' + date + '</p>');
});
+ $('#another_date').day(function(date) {
+ jQuery('#another_result').append('<p>Selected date: ' + date + '</p>');
+ });
});
</script>
</body>

No commit comments for this range

Something went wrong with that request. Please try again.