From bab51fedc1012447a23eeb658d9eda2e5720dddc Mon Sep 17 00:00:00 2001 From: Indri Muska Date: Tue, 28 Jan 2014 17:31:02 +0100 Subject: [PATCH 1/7] Folder structure for jam 1.4 and demo update --- index.html | 43 ------ jQueryMobile-1.4/demos/index.html | 39 +++++ .../sources/jquery.mobile.datepicker.css | 8 +- .../sources/jquery.mobile.datepicker.js | 132 ++++++++++++++++ jquery.mobile.datepicker.js | 146 ------------------ 5 files changed, 175 insertions(+), 193 deletions(-) delete mode 100644 index.html create mode 100644 jQueryMobile-1.4/demos/index.html rename jquery.mobile.datepicker.css => jQueryMobile-1.4/sources/jquery.mobile.datepicker.css (84%) create mode 100644 jQueryMobile-1.4/sources/jquery.mobile.datepicker.js delete mode 100644 jquery.mobile.datepicker.js diff --git a/index.html b/index.html deleted file mode 100644 index 841c4db..0000000 --- a/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - jQuery Mobile test page - - - - - - - - - - - - - - - -
- -
-

Mobile Datepicker

-
- -
- - - - - -
- -
-

Footer

-
- -
- - - \ No newline at end of file diff --git a/jQueryMobile-1.4/demos/index.html b/jQueryMobile-1.4/demos/index.html new file mode 100644 index 0000000..529dc29 --- /dev/null +++ b/jQueryMobile-1.4/demos/index.html @@ -0,0 +1,39 @@ + + + + + jQuery Mobile Datepicker + + + + + + + + + + + + + + + + + + +
+
+

jQuery Mobile Datepicker

+
+
+ + on focus: + + + always visible: + + +
+
+ + diff --git a/jquery.mobile.datepicker.css b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css similarity index 84% rename from jquery.mobile.datepicker.css rename to jQueryMobile-1.4/sources/jquery.mobile.datepicker.css index 11199d7..cc65197 100644 --- a/jquery.mobile.datepicker.css +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css @@ -1,12 +1,12 @@ -div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0; max-width:340px } +div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0; max-width: 340px; } .ui-datepicker { overflow: visible; margin: 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.6em 0; border-bottom: 0; font-weight: bold; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position:absolute; top: .6em; margin-top: 0; text-indent: -9999px; } -.ui-datepicker .ui-datepicker-prev { left:9px; } -.ui-datepicker .ui-datepicker-next { right:2px; } +.ui-datepicker .ui-datepicker-prev { left: 9px; } +.ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } -.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } +.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js new file mode 100644 index 0000000..3b1edbe --- /dev/null +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js @@ -0,0 +1,132 @@ +(function( $, undefined ) { + $.widget("mobile.date",{ + options:{ + defaultDate: null, // Used when field is blank: actual date, + // +/-number for offset from today, null for today + appendText: "", // Display text following the input box, e.g. showing the format + buttonText: "...", // Text for trigger button + buttonImage: "", // URL for trigger button image + buttonImageOnly: false, // True if the image appears alone, false if it appears on a button + hideIfNoPrevNext: false, // True to hide next/previous month links + // if not applicable, false to just disable them + navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links + gotoCurrent: false, // True if today link goes back to current selection instead + changeMonth: false, // True if month can be selected directly, false if only prev/next + changeYear: false, // True if year can be selected directly, false if only prev/next + yearRange: "c-10:c+10", // Range of years to display in drop-down, + // either relative to today's year (-nn:+nn), relative to currently displayed year + // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n) + showOtherMonths: false, // True to show dates in other months, false to leave blank + selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable + showWeek: false, // True to show week of the year, false to not show it + calculateWeek: this.iso8601Week, // How to calculate the week of the year, + // takes a Date and returns the number of the week for it + shortYearCutoff: "+10", // Short year values < this are in the current century, + // > this are in the previous century, + // string value starting with "+" for current year + value + minDate: null, // The earliest selectable date, or null for no limit + maxDate: null, // The latest selectable date, or null for no limit + 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 + numberOfMonths: 1, // Number of months to show at a time + showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0) + stepMonths: 1, // Number of months to step back/forward + stepBigMonths: 12, // Number of months to step back/forward for the big links + altField: "", // Selector for an alternate field to store selected dates into + altFormat: "", // The date format to use for the alternate field + constrainInput: true, // The input is constrained by the current date format + showButtonPanel: false, // True to show button panel, false to not show it + autoSize: false, // True to size the input for the date format, false to leave as is + disabled: false, // The initial disabled state + inline: false, + // Define a callback function when a date is selected + onSelect: function(text,object){ + var self = this; + setTimeout( function(){ + $(object.settings.altField).date( "addMobileStyle" ); + },0); + }, + onChangeMonthYear: function(month,year,object){ + var self = this; + setTimeout( function(){ + $(object.settings.altField).date( "addMobileStyle" ); + },0); + }, + // Define a callback function when the month or year is changed + beforeShow: function( element ){ + var self = this; + setTimeout( function(){ + $(element.input).data("mobileDate").addMobileStyle(); + },0); + } + }, + _create:function(){ + var calendar, interval, that = this; + this.options.altField = this.element; + if( this.options.inline ){ + calendar = $("
").datepicker(this.options); + this.element.parent().after(calendar); + } else { + this.element.datepicker( this.options ); + calendar= this.element.datepicker( "widget" ); + } + + this.calendar = calendar; + + this._on({ + "change": function() { + if( this.options.inline ){ + this.calendar.datepicker( "setDate", this.element.val() ); + } + this._delay( "addMobileStyle", 10 ); + }, + "input": function() { + interval = window.setInterval( function(){ + if( !that.calendar.hasClass( "mobile-enhanced" ) ){ + that.addMobileStyle(); + } else { + clearInterval( interval ); + } + }); + } + }); + + this.addMobileStyle(); + }, + setOption:function( key, value ){ + this.calendar.datepicker("option",key,value); + }, + getDate: function(){ + return this.calendar.datepicker("getDate"); + }, + _destroy: function(){ + return this.calendar.datepicker("destroy"); + }, + isDisabled: function(){ + return this.calendar.datepicker("isDisabled"); + }, + refresh: function(){ + return this.calendar.datepicker("refresh"); + }, + setDate: function( date ){ + return this.calendar.datepicker("setDate", date ); + }, + widget:function(){ + return this.element; + }, + addMobileStyle: function(){ + this.calendar.addClass("ui-shadow") + .find( ".ui-datepicker-calendar" ).addClass( "mobile-enhanced" ).end() + .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-calendar th" ).addClass("ui-bar-a").end() + .find(".ui-datepicker-calendar td" ).addClass("ui-body-a").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"); + } + }); + +})( jQuery ); diff --git a/jquery.mobile.datepicker.js b/jquery.mobile.datepicker.js deleted file mode 100644 index f1feb03..0000000 --- a/jquery.mobile.datepicker.js +++ /dev/null @@ -1,146 +0,0 @@ -(function( $, undefined ) { - $.widget("mobile.date",{ - options:{ - defaultDate: null, // Used when field is blank: actual date, - // +/-number for offset from today, null for today - appendText: "", // Display text following the input box, e.g. showing the format - buttonText: "...", // Text for trigger button - buttonImage: "", // URL for trigger button image - buttonImageOnly: false, // True if the image appears alone, false if it appears on a button - hideIfNoPrevNext: false, // True to hide next/previous month links - // if not applicable, false to just disable them - navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links - gotoCurrent: false, // True if today link goes back to current selection instead - changeMonth: false, // True if month can be selected directly, false if only prev/next - changeYear: false, // True if year can be selected directly, false if only prev/next - yearRange: "c-10:c+10", // Range of years to display in drop-down, - // either relative to today's year (-nn:+nn), relative to currently displayed year - // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n) - showOtherMonths: false, // True to show dates in other months, false to leave blank - selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable - showWeek: false, // True to show week of the year, false to not show it - calculateWeek: this.iso8601Week, // How to calculate the week of the year, - // takes a Date and returns the number of the week for it - shortYearCutoff: "+10", // Short year values < this are in the current century, - // > this are in the previous century, - // string value starting with "+" for current year + value - minDate: null, // The earliest selectable date, or null for no limit - maxDate: null, // The latest selectable date, or null for no limit - 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 - onSelect: function(text,object){ - var self = this; - setTimeout( function(){ - if( !object.settings.inline ){ - $(object.input) - .date( "addMobileStyle" ); - } else { - $(object.settings.altField) - .date( "addMobileStyle" ); - } - },0); - }, // Define a callback function when a date is selected - onChangeMonthYear: function(month,year,object){ - var self = this; - setTimeout( function(){ - if( !object.settings.inline ){ - $(object.input) - .date( "addMobileStyle" ); - } else { - $(object.settings.altField) - .date( "addMobileStyle" ); - } - },0); - }, - beforeShow: function( element ){ - var self = this; - setTimeout( function(){ - $(element) - .data("mobileDate").addMobileStyle(); - },0); - },// Define a callback function when the month or year is changed - numberOfMonths: 1, // Number of months to show at a time - showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0) - stepMonths: 1, // Number of months to step back/forward - stepBigMonths: 12, // Number of months to step back/forward for the big links - altField: "", // Selector for an alternate field to store selected dates into - altFormat: "", // The date format to use for the alternate field - constrainInput: true, // The input is constrained by the current date format - showButtonPanel: false, // True to show button panel, false to not show it - autoSize: false, // True to size the input for the date format, false to leave as is - disabled: false, // The initial disabled state - inline: false - }, - _create:function(){ - var calendar, interval, - that = this; - if( this.options.inline ){ - this.options.altField = this.element; - calendar = $("
").datepicker(this.options); - this.element.parent().after(calendar); - } else { - this.element.datepicker( this.options ); - calendar= this.element.datepicker( "widget" ); - } - - this.calendar = calendar; - - this.baseWidget = ( !this.options.inline )? this.element: this.calendar; - - this._on({ - "change": function() { - if( this.options.inline ){ - this.calendar.datepicker( "setDate", this.element.val() ); - } - this._delay( "addMobileStyle", 10 ); - }, - "input": function() { - interval = window.setInterval( function(){ - if( !that.calendar.hasClass( "mobile-enhanced" ) ){ - that.addMobileStyle(); - } else { - clearInterval( interval ); - } - }); - } - }); - this.addMobileStyle(); - }, - setOption:function( key, value ){ - this.calendar.datepicker("option",key,value); - }, - getDate: function(){ - console.log( this.baseWidget ); - return this.baseWidget.datepicker("getDate"); - }, - _destroy: function(){ - return this.baseWidget.datepicker("destroy"); - }, - isDisabled: function(){ - return this.baseWidget.datepicker("isDisabled"); - }, - refresh: function(){ - return this.baseWidget.datepicker("refresh"); - }, - setDate: function( date ){ - return this.baseWidget.datepicker("setDate", date ); - }, - widget:function(){ - return this.element; - }, - addMobileStyle: function(){ - this.calendar.addClass("ui-shadow") - .find( ".ui-datepicker-calendar" ).addClass( "mobile-enhanced" ).end() - .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-calendar th" ).addClass("ui-bar-a").end() - .find(".ui-datepicker-calendar td" ).addClass("ui-body-a").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"); - } - }); - - })( jQuery ); From 9ead90b9cea6db066e7a89fb346f34a8d9862ac6 Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 17:42:43 +0100 Subject: [PATCH 2/7] Support for [data-theme] --- .../sources/jquery.mobile.datepicker.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js index 3b1edbe..f3ec2d5 100644 --- a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js @@ -40,6 +40,7 @@ autoSize: false, // True to size the input for the date format, false to leave as is disabled: false, // The initial disabled state inline: false, + theme: 'a', // Default theme // Define a callback function when a date is selected onSelect: function(text,object){ var self = this; @@ -64,6 +65,12 @@ _create:function(){ var calendar, interval, that = this; this.options.altField = this.element; + + // Support for [data-theme] + if (this.element.data('theme')) { + this.options.theme = this.element.data('theme'); + } + if( this.options.inline ){ calendar = $("
").datepicker(this.options); this.element.parent().after(calendar); @@ -122,10 +129,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 50f7ae52419c7c3c67bd2f45a622405d2beaa881 Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 17:50:23 +0100 Subject: [PATCH 3/7] Css update Added padding and min-width for unselectables days --- .../sources/jquery.mobile.datepicker.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css index cc65197..74f5dff 100644 --- a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css @@ -1,19 +1,19 @@ -div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0; max-width: 340px; } -.ui-datepicker { overflow: visible; margin: 0; } -.ui-datepicker .ui-datepicker-header { position:relative; padding:.6em 0; border-bottom: 0; font-weight: bold; } -.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position:absolute; top: .6em; margin-top: 0; text-indent: -9999px; } +div.hasDatepicker { display: block; padding: 0; overflow: visible; margin: 8px 0; max-width: 340px; } +.ui-datepicker { overflow: visible; margin: 0; } +.ui-datepicker .ui-datepicker-header { position: relative; padding: .6em 0; border-bottom: 0; font-weight: bold; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position: absolute; top: .6em; margin-top: 0; text-indent: -9999px; } .ui-datepicker .ui-datepicker-prev { left: 9px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } -.ui-datepicker select.ui-datepicker-month-year {width: 100%;} +.ui-datepicker select.ui-datepicker-month-year { width: 100%; } .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 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; 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 69271cdd0c0fc34e44e2796581c63d13b0e942be Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 18:16:43 +0100 Subject: [PATCH 4/7] Support for jQuery Mobile 1.3 --- jQueryMobile-1.3/demos/index.html | 46 ++++++ .../sources/jquery.mobile.datepicker.css | 28 ++++ .../sources/jquery.mobile.datepicker.js | 144 ++++++++++++++++++ 3 files changed, 218 insertions(+) create mode 100644 jQueryMobile-1.3/demos/index.html create mode 100644 jQueryMobile-1.3/sources/jquery.mobile.datepicker.css create mode 100644 jQueryMobile-1.3/sources/jquery.mobile.datepicker.js diff --git a/jQueryMobile-1.3/demos/index.html b/jQueryMobile-1.3/demos/index.html new file mode 100644 index 0000000..55b4b14 --- /dev/null +++ b/jQueryMobile-1.3/demos/index.html @@ -0,0 +1,46 @@ + + + + + jQuery Mobile Datepicker + + + + + + + + + + + + + + + + + + +
+
+

jQuery Mobile Datepicker

+
+
+ + on focus: + + + always visible: + + + + +
+
+ + diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.css b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.css new file mode 100644 index 0000000..ee04534 --- /dev/null +++ b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.css @@ -0,0 +1,28 @@ +div.hasDatepicker { display: block; padding: 0; overflow: visible; margin: 0 1em; max-width: 340px; } +.ui-datepicker { overflow: visible; margin: 0; } +.ui-datepicker .ui-datepicker-header { position: relative; padding: .6em 0; border-bottom: 0; font-weight: bold; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position: absolute; top: .6em; margin-top: 0; text-indent: -9999px; } + +.ui-datepicker .ui-datepicker-prev { left: 9px; } +.ui-datepicker .ui-datepicker-next { right: 9px; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px; } +.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } +.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } +.ui-datepicker select.ui-datepicker-month-year { width: 100%; } +.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; 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, .ui-datepicker-calendar td span { padding: .6em .5em; } + +/* jQuery mobile 1.4 theme for versions <= 1.3 */ +.ui-datepicker-header, .ui-datepicker th, .ui-datepicker td { border-color: #ddd; } +.ui-datepicker th, .ui-datepicker td.ui-state-selectable { background: #e9e9e9; } +.ui-datepicker td.ui-state-selectable { background: #f6f6f6; } +.ui-datepicker td.ui-state-selectable:hover { background: #ededed; } +.ui-datepicker td.ui-state-selectable>a, .ui-datepicker td.ui-state-selectable:hover>a { color: #333; } +.ui-datepicker .ui-btn-active { color: #fff !important; text-shadow: 0 1px 0 #059; border-color: #38c; background: #38c; } \ No newline at end of file diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js new file mode 100644 index 0000000..f5a6569 --- /dev/null +++ b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js @@ -0,0 +1,144 @@ +(function( $, undefined ) { + $.widget("mobile.date",{ + options:{ + defaultDate: null, // Used when field is blank: actual date, + // +/-number for offset from today, null for today + appendText: "", // Display text following the input box, e.g. showing the format + buttonText: "...", // Text for trigger button + buttonImage: "", // URL for trigger button image + buttonImageOnly: false, // True if the image appears alone, false if it appears on a button + hideIfNoPrevNext: false, // True to hide next/previous month links + // if not applicable, false to just disable them + navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links + gotoCurrent: false, // True if today link goes back to current selection instead + changeMonth: false, // True if month can be selected directly, false if only prev/next + changeYear: false, // True if year can be selected directly, false if only prev/next + yearRange: "c-10:c+10", // Range of years to display in drop-down, + // either relative to today's year (-nn:+nn), relative to currently displayed year + // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n) + showOtherMonths: false, // True to show dates in other months, false to leave blank + selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable + showWeek: false, // True to show week of the year, false to not show it + calculateWeek: this.iso8601Week, // How to calculate the week of the year, + // takes a Date and returns the number of the week for it + shortYearCutoff: "+10", // Short year values < this are in the current century, + // > this are in the previous century, + // string value starting with "+" for current year + value + minDate: null, // The earliest selectable date, or null for no limit + maxDate: null, // The latest selectable date, or null for no limit + 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 + numberOfMonths: 1, // Number of months to show at a time + showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0) + stepMonths: 1, // Number of months to step back/forward + stepBigMonths: 12, // Number of months to step back/forward for the big links + altField: "", // Selector for an alternate field to store selected dates into + altFormat: "", // The date format to use for the alternate field + constrainInput: true, // The input is constrained by the current date format + showButtonPanel: false, // True to show button panel, false to not show it + autoSize: false, // True to size the input for the date format, false to leave as is + disabled: false, // The initial disabled state + inline: false, + theme: 'c', // Default theme + headerTheme: 'd', // Header default theme + // Define a callback function when a date is selected + onSelect: function(text,object){ + setTimeout( function(){ + $(object.settings.altField).date( "addMobileStyle" ); + },0); + }, + onChangeMonthYear: function(month,year,object){ + setTimeout( function(){ + $(object.settings.altField).date( "addMobileStyle" ); + },0); + }, + // Define a callback function when the month or year is changed + beforeShow: function( element ){ + setTimeout( function(){ + $(element).date( "addMobileStyle" ); + },0); + } + }, + _create:function(){ + var calendar, interval, that = this; + this.options.altField = this.element; + + // Support for [data-theme] + if (this.element.data('theme')) { + this.options.theme = this.element.data('theme'); + } + // Support for [data-inline] + if (this.element.data('inline')) { + this.options.inline = !!this.element.data('inline'); + } + + if( this.options.inline ){ + calendar = $("
").datepicker(this.options); + this.element.parent().after(calendar); + } else { + this.element.datepicker( this.options ); + calendar= this.element.datepicker( "widget" ); + } + + this.calendar = calendar; + + this._on({ + "change": function() { + if( this.options.inline ){ + this.calendar.datepicker( "setDate", this.element.val() ); + } + this._delay( "addMobileStyle", 10 ); + }, + "input": function() { + interval = window.setInterval( function(){ + if( !that.calendar.hasClass( "mobile-enhanced" ) ){ + that.addMobileStyle(); + } else { + clearInterval( interval ); + } + }); + } + }); + + this.addMobileStyle(); + }, + setOption:function( key, value ){ + this.calendar.datepicker("option",key,value); + }, + getDate: function(){ + return this.calendar.datepicker("getDate"); + }, + _destroy: function(){ + return this.calendar.datepicker("destroy"); + }, + isDisabled: function(){ + return this.calendar.datepicker("isDisabled"); + }, + refresh: function(){ + return this.calendar.datepicker("refresh"); + }, + setDate: function( date ){ + return this.calendar.datepicker("setDate", date ); + }, + widget:function(){ + return this.element; + }, + addMobileStyle: function(){ + this.calendar.addClass('ui-shadow') + .find('.ui-datepicker-prev, .ui-datepicker-next').addClass('ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow').each(function () { + $(this).append($('').append($(this).find('.ui-icon'))); + }).end() + .find('.ui-datepicker-prev .ui-icon').addClass('ui-icon-arrow-l').end() + .find('.ui-datepicker-next .ui-icon').addClass('ui-icon-arrow-r').end() + .find('.ui-datepicker-header').addClass('ui-body-' + this.options.headerTheme + ' 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:not(.ui-state-disabled)').addClass('ui-state-selectable ui-body-' + this.options.theme).end() + .find('.ui-datepicker-calendar td.ui-state-disabled').addClass('ui-body-' + this.options.headerTheme).css('opacity', '1').end() + .find('.ui-datepicker-calendar td>a:not(.ui-state-active)').addClass('ui-link').end() + .find('.ui-datepicker-calendar td>a.ui-state-active').addClass('ui-btn-active').end() + .find('.ui-datepicker-calendar td>a.ui-state-highlight').addClass('ui-btn-up-' + this.options.theme); + } + }); + +})( jQuery ); From d7db5aac7fc1a1849d728326d9bdbb3be0863b07 Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 18:22:10 +0100 Subject: [PATCH 5/7] Update new demos' link Added author section --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f3cb828..c959338 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,13 @@ jquery-mobile-datepicker-wrapper Wrapper to turn jquery ui datepicker into a mobile widget. This take the jQuery ui datepicker and turns it into a fully functional jquery mobile widget. This includes auto initalization via data-role="date" and reading of options from data-attributes. -For example usage please see http://jsbin.com/uzaret/938/edit -* **Compatible with jQuery Mobile 1.4+** +* **Compatible with jQuery Mobile 1.3:** [DEMO](http://htmlpreview.github.io/?http://github.com/indrimuska/jquery-mobile-datepicker-wrapper/blob/master/jQueryMobile-1.3/demos/index.html) + +* **Compatible with jQuery Mobile 1.4+:** [DEMO](http://htmlpreview.github.io/?http://github.com/indrimuska/jquery-mobile-datepicker-wrapper/blob/master/jQueryMobile-1.4/demos/index.html) * **Please note:** this widget is called date not datepicker so when calling methods you must use $(element).date("method"); other then this all jquery ui functionality is the same and you can see jquery ui api for usage http://api.jqueryui.com/datepicker/ + +## Author + +Project started from [arschmitz](https://github.com/arschmitz/) and forked by [indrimuska](https://github.com/indrimuska/). From 689bdb8e116d518e5da057405aa050960910e8de Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 19:31:20 +0100 Subject: [PATCH 6/7] Bug fix: custom callbacks allowed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previous code doesn’t allow to set a custom callback for onSelect/onChangeMonth/beforeShow and either restyle the calendar --- .../sources/jquery.mobile.datepicker.js | 51 +++++++++++------- .../sources/jquery.mobile.datepicker.js | 54 +++++++++++-------- 2 files changed, 66 insertions(+), 39 deletions(-) diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js index f5a6569..627daf8 100644 --- a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js +++ b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js @@ -39,26 +39,12 @@ showButtonPanel: false, // True to show button panel, false to not show it autoSize: false, // True to size the input for the date format, false to leave as is disabled: false, // The initial disabled state - inline: false, + inline: false, // True to set the calendar always visible theme: 'c', // Default theme headerTheme: 'd', // Header default theme - // Define a callback function when a date is selected - onSelect: function(text,object){ - setTimeout( function(){ - $(object.settings.altField).date( "addMobileStyle" ); - },0); - }, - onChangeMonthYear: function(month,year,object){ - setTimeout( function(){ - $(object.settings.altField).date( "addMobileStyle" ); - },0); - }, - // Define a callback function when the month or year is changed - beforeShow: function( element ){ - setTimeout( function(){ - $(element).date( "addMobileStyle" ); - },0); - } + onSelect: null, // Define a callback function when a date is selected + onChangeMonthYear: null, // Define a callback function when the month or year is changed + beforeShow: null // Define a callback function when the calendar is shown }, _create:function(){ var calendar, interval, that = this; @@ -73,6 +59,35 @@ this.options.inline = !!this.element.data('inline'); } + // Setting up callbacks + this.options._onSelect = this.options.onSelect; + this.options.onSelect = function (text, object) { + setTimeout(function () { + $(object.settings.altField).date( "addMobileStyle" ); + if (callback = $(object.settings.altField).data("mobileDate").options._onSelect) { + callback(text, object); + } + }, 0); + } + this.options._onChangeMonthYear = this.options.onChangeMonthYear; + this.options.onChangeMonthYear = function (month, year, object) { + setTimeout(function () { + $(object.settings.altField).date( "addMobileStyle" ); + if (callback = $(object.settings.altField).data("mobileDate").options._onChangeMonthYear) { + callback(month, year, object); + } + }, 0); + } + this.options._beforeShow = this.options.beforeShow; + this.options.beforeShow = function (element) { + setTimeout(function () { + $(element).date( "addMobileStyle" ); + if (callback = $(element).data("mobileDate").options._beforeShow) { + callback(element); + } + }, 0); + } + if( this.options.inline ){ calendar = $("
").datepicker(this.options); this.element.parent().after(calendar); diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js index f3ec2d5..6ee9c21 100644 --- a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js @@ -39,28 +39,11 @@ showButtonPanel: false, // True to show button panel, false to not show it autoSize: false, // True to size the input for the date format, false to leave as is disabled: false, // The initial disabled state - inline: false, + inline: false, // True to set the calendar always visible theme: 'a', // Default theme - // Define a callback function when a date is selected - onSelect: function(text,object){ - var self = this; - setTimeout( function(){ - $(object.settings.altField).date( "addMobileStyle" ); - },0); - }, - onChangeMonthYear: function(month,year,object){ - var self = this; - setTimeout( function(){ - $(object.settings.altField).date( "addMobileStyle" ); - },0); - }, - // Define a callback function when the month or year is changed - beforeShow: function( element ){ - var self = this; - setTimeout( function(){ - $(element.input).data("mobileDate").addMobileStyle(); - },0); - } + onSelect: null, // Define a callback function when a date is selected + onChangeMonthYear: null, // Define a callback function when the month or year is changed + beforeShow: null // Define a callback function when the calendar is shown }, _create:function(){ var calendar, interval, that = this; @@ -71,6 +54,35 @@ this.options.theme = this.element.data('theme'); } + // Setting up callbacks + this.options._onSelect = this.options.onSelect; + this.options.onSelect = function (text, object) { + setTimeout(function () { + $(object.settings.altField).date( "addMobileStyle" ); + if (callback = $(object.settings.altField).data("mobileDate").options._onSelect) { + callback(text, object); + } + }, 0); + } + this.options._onChangeMonthYear = this.options.onChangeMonthYear; + this.options.onChangeMonthYear = function (month, year, object) { + setTimeout(function () { + $(object.settings.altField).date( "addMobileStyle" ); + if (callback = $(object.settings.altField).data("mobileDate").options._onChangeMonthYear) { + callback(month, year, object); + } + }, 0); + } + this.options._beforeShow = this.options.beforeShow; + this.options.beforeShow = function (element) { + setTimeout(function () { + $(element).date( "addMobileStyle" ); + if (callback = $(element).data("mobileDate").options._beforeShow) { + callback(element); + } + }, 0); + } + if( this.options.inline ){ calendar = $("
").datepicker(this.options); this.element.parent().after(calendar); From 24f0e1c6784375971ad764ff7cf5c7e063d25092 Mon Sep 17 00:00:00 2001 From: indrimuska Date: Tue, 28 Jan 2014 19:36:56 +0100 Subject: [PATCH 7/7] Added second parameter to beforeShow callback --- jQueryMobile-1.3/sources/jquery.mobile.datepicker.js | 4 ++-- jQueryMobile-1.4/sources/jquery.mobile.datepicker.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js index 627daf8..c81cde6 100644 --- a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js +++ b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js @@ -79,11 +79,11 @@ }, 0); } this.options._beforeShow = this.options.beforeShow; - this.options.beforeShow = function (element) { + this.options.beforeShow = function (element, inst) { setTimeout(function () { $(element).date( "addMobileStyle" ); if (callback = $(element).data("mobileDate").options._beforeShow) { - callback(element); + callback(element, inst); } }, 0); } diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js index 6ee9c21..9ce7458 100644 --- a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js +++ b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.js @@ -74,11 +74,11 @@ }, 0); } this.options._beforeShow = this.options.beforeShow; - this.options.beforeShow = function (element) { + this.options.beforeShow = function (element, inst) { setTimeout(function () { $(element).date( "addMobileStyle" ); if (callback = $(element).data("mobileDate").options._beforeShow) { - callback(element); + callback(element, inst); } }, 0); }