1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | /* * jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile * Copyright (c) jQuery Project * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ (function($, undefined ) { //cache previous datepicker ui method var prevDp = $.fn.datepicker; //rewrite datepicker $.fn.datepicker = function( options ){ var dp = this; //call cached datepicker plugin prevDp.call( this, options ); //extend with some dom manipulation to update the markup for jQM //call immediately function updateDatepicker(){ $( ".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", 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-calendar th", dp ).addClass("ui-bar-c"); $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c"); $( ".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-highlight", dp ).addClass("ui-btn-up-e"); // today"s date $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){ var el = $(this); // remove extra button markup - necessary for date value to be interpreted correctly el.html( el.find( ".ui-btn-text" ).text() ); }); }; //update now updateDatepicker(); // and on click $( dp ).click( updateDatepicker ); //return jqm obj return this; }; //bind to pagecreate to automatically enhance date inputs $( ".ui-page" ).live( "pagecreate", function(){ $( "input[type='date'], input[data-type='date']" ).each(function(){ $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); }); }); })( jQuery ); |