From 92b5625a60fe17505c7c5dd77ce2452c606a260c Mon Sep 17 00:00:00 2001 From: Indri Muska Date: Mon, 17 Mar 2014 23:50:32 +0100 Subject: [PATCH 1/3] Support for theme attribute (data-theme) Demo: http://jsbin.com/indrimuska/33/edit --- jquery.mobile.datepicker.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/jquery.mobile.datepicker.js b/jquery.mobile.datepicker.js index f1feb03..9786335 100644 --- a/jquery.mobile.datepicker.js +++ b/jquery.mobile.datepicker.js @@ -29,6 +29,7 @@ beforeShowDay: null, // Function that takes a date and returns an array with // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or "", // [2] = cell title (optional), e.g. $.datepicker.noWeekends + theme: 'a', // Default theme onSelect: function(text,object){ var self = this; setTimeout( function(){ @@ -136,10 +137,10 @@ .find(".ui-datepicker-prev").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-l ui-shadow").end() .find(".ui-datepicker-next").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-r ui-shadow").end() .find(".ui-datepicker-header").addClass("ui-body-a ui-corner-top").removeClass("ui-corner-all").end() - .find(".ui-datepicker-calendar th" ).addClass("ui-bar-a").end() - .find(".ui-datepicker-calendar td" ).addClass("ui-body-a").end() + .find(".ui-datepicker-calendar th" ).addClass("ui-bar-" + this.options.theme).end() + .find(".ui-datepicker-calendar td" ).addClass("ui-body-" + this.options.theme).end() .find(".ui-datepicker-calendar a.ui-state-active").addClass("ui-btn-active").end() - .find(".ui-datepicker-calendar a.ui-state-highlight").addClass("ui-btn-up-a").end().find(".ui-state-disabled").css("opacity","1"); + .find(".ui-datepicker-calendar a.ui-state-highlight").addClass("ui-btn-up-" + this.options.theme).end().find(".ui-state-disabled").css("opacity","1"); } }); From 0f30ab8e3582ac0047f01094108b92adb39798ba Mon Sep 17 00:00:00 2001 From: Indri Muska Date: Tue, 18 Mar 2014 00:01:11 +0100 Subject: [PATCH 2/3] CSS update Added padding and min-width for unselectable days --- jquery.mobile.datepicker.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.mobile.datepicker.css b/jquery.mobile.datepicker.css index 11199d7..0c2cc8a 100644 --- a/jquery.mobile.datepicker.css +++ b/jquery.mobile.datepicker.css @@ -11,9 +11,9 @@ div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0 .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; border-collapse: collapse; margin:0; } -.ui-datepicker td { border-width: 1px; padding:0; text-align: center; } +.ui-datepicker td { border-width: 1px; padding:0; text-align: center; min-width: 41px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; } .ui-datepicker-calendar th { padding-top: .4em; padding-bottom: .4em; } .ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .7; } -.ui-datepicker-calendar td a { padding:.6em .5em; } \ No newline at end of file +.ui-datepicker-calendar td a, .ui-datepicker-calendar td span { padding: .6em .5em; } \ No newline at end of file From 67323abce9d961623d13b6b171c7267f84c79682 Mon Sep 17 00:00:00 2001 From: Indri Muska Date: Fri, 21 Mar 2014 15:11:03 +0100 Subject: [PATCH 3/3] Support for theme attribute (header bar) --- jquery.mobile.datepicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.mobile.datepicker.js b/jquery.mobile.datepicker.js index 9786335..05f674b 100644 --- a/jquery.mobile.datepicker.js +++ b/jquery.mobile.datepicker.js @@ -136,7 +136,7 @@ .find(".ui-datepicker-calendar a,.ui-datepicker-prev,.ui-datepicker-next").addClass("ui-btn").end() .find(".ui-datepicker-prev").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-l ui-shadow").end() .find(".ui-datepicker-next").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-r ui-shadow").end() - .find(".ui-datepicker-header").addClass("ui-body-a ui-corner-top").removeClass("ui-corner-all").end() + .find(".ui-datepicker-header").addClass("ui-body-" + this.options.theme + " ui-corner-top").removeClass("ui-corner-all").end() .find(".ui-datepicker-calendar th" ).addClass("ui-bar-" + this.options.theme).end() .find(".ui-datepicker-calendar td" ).addClass("ui-body-" + this.options.theme).end() .find(".ui-datepicker-calendar a.ui-state-active").addClass("ui-btn-active").end()