Date picker and bylines for platforms`
[bus.git] / busui / js / jquery.ui.datepicker.mobile.js
blob:a/busui/js/jquery.ui.datepicker.mobile.js -> blob:b/busui/js/jquery.ui.datepicker.mobile.js
--- a/busui/js/jquery.ui.datepicker.mobile.js
+++ b/busui/js/jquery.ui.datepicker.mobile.js
@@ -1,1 +1,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 );