| /* | /* |
| * jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile | * jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile |
| * Copyright (c) jQuery Project | * Copyright (c) jQuery Project |
| * Dual licensed under the MIT or GPL Version 2 licenses. | * Dual licensed under the MIT or GPL Version 2 licenses. |
| * http://jquery.org/license | * http://jquery.org/license |
| */ | */ |
| (function($, undefined ) { | (function($, undefined ) { |
| //cache previous datepicker ui method | //cache previous datepicker ui method |
| var prevDp = $.fn.datepicker; | var prevDp = $.fn.datepicker; |
| //rewrite datepicker | //rewrite datepicker |
| $.fn.datepicker = function( options ){ | $.fn.datepicker = function( options ){ |
| var dp = this; | var dp = this; |
| //call cached datepicker plugin | //call cached datepicker plugin |
| prevDp.call( this, options ); | prevDp.call( this, options ); |
| //extend with some dom manipulation to update the markup for jQM | //extend with some dom manipulation to update the markup for jQM |
| //call immediately | //call immediately |
| function updateDatepicker(){ | function updateDatepicker(){ |
| $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); | $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); |
| $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#"); | $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#"); |
| $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); | $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); |
| $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); | $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); |
| $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c"); | $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c"); |
| $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c"); | $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c"); |
| $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); | $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); |
| $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date | $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date |
| $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date | $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date |
| $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){ | $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){ |
| var el = $(this); | var el = $(this); |
| // remove extra button markup - necessary for date value to be interpreted correctly | // remove extra button markup - necessary for date value to be interpreted correctly |
| el.html( el.find( ".ui-btn-text" ).text() ); | el.html( el.find( ".ui-btn-text" ).text() ); |
| }); | }); |
| }; | }; |
| //update now | //update now |
| updateDatepicker(); | updateDatepicker(); |
| // and on click | // and on click |
| $( dp ).click( updateDatepicker ); | $( dp ).click( updateDatepicker ); |
| //return jqm obj | //return jqm obj |
| return this; | return this; |
| }; | }; |
| //bind to pagecreate to automatically enhance date inputs | //bind to pagecreate to automatically enhance date inputs |
| $( ".ui-page" ).live( "pagecreate", function(){ | $( ".ui-page" ).live( "pagecreate", function(){ |
| $( "input[type='date'], input[data-type='date']" ).each(function(){ | $( "input[type='date'], input[data-type='date']" ).each(function(){ |
| if ($(this).hasClass("hasDatepicker") == false) { | |
| $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); | $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); |
| }); | $(this).addClass("hasDatepicker"); |
| }); | } |
| }); | |
| }); | |
| })( jQuery ); | })( jQuery ); |