/* |
/* |
* 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 ); |