arschmitz · indrimuska · Jan 28, 2014 · Jan 28, 2014 · Jan 28, 2014 · Jan 28, 2014
diff --git 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/).
diff --git a/index.html b/index.html
diff --git a/jQueryMobile-1.3/demos/index.html b/jQueryMobile-1.3/demos/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>jQuery Mobile Datepicker</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="author" content="https://plus.google.com/u/0/+IndriMuska" />
+
+	<!-- jQuery -->
+	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+
+	<!-- jQuery UI -->
+	<script src="http://view.jqueryui.com/master/ui/datepicker.js"></script>
+
+	<!-- jQuery Mobile -->
+	<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet">
+	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
+
+	<!-- jQuery Mobile Datepicker -->
+	<link href="../sources/jquery.mobile.datepicker.css" rel="stylesheet">
+	<script src="../sources/jquery.mobile.datepicker.js"></script>
+</head>
+<body>
+	<div data-role="page">
+		<div data-role="header">
+			<h1>jQuery Mobile Datepicker</h1>
+		</div>
+		<div data-role="content">
+
+			on focus:
+			<input type="text" data-role="date" />
+
+			always visible:
+			<input type="text" data-role="date" data-inline="true" data-theme="c" />
+
+			<script>
+			// Widget needs to be launched manually
+			$('[data-role=date]').each( function(){
+				$(this).date();
+			})
+			</script>
+
+		</div>
+	</div>
+</body>
+</html>
diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.css 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; }
diff --git a/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js b/jQueryMobile-1.3/sources/jquery.mobile.datepicker.js
@@ -0,0 +1,159 @@
+(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,                   // True to set the calendar always visible
+			theme: 'c',                      // Default theme
+			headerTheme: 'd',                // Header default theme
+			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;
+			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');
+			}
+
+			// 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, inst) {
+				setTimeout(function () {
+					$(element).date( "addMobileStyle" );
+					if (callback = $(element).data("mobileDate").options._beforeShow) {
+						callback(element, inst);
+					}
+				}, 0);
+			}
+
+			if( this.options.inline ){
+				calendar = $("<div>").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($('<span class="ui-btn-inner"></span>').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 );
diff --git a/jQueryMobile-1.4/demos/index.html b/jQueryMobile-1.4/demos/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>jQuery Mobile Datepicker</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="author" content="https://plus.google.com/u/0/+IndriMuska" />
+
+	<!-- jQuery -->
+	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+
+	<!-- jQuery UI -->
+	<script src="http://view.jqueryui.com/master/ui/datepicker.js"></script>
+
+	<!-- jQuery Mobile -->
+	<link href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"rel="stylesheet">
+	<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
+
+	<!-- jQuery Mobile Datepicker -->
+	<link href="../sources/jquery.mobile.datepicker.css" rel="stylesheet">
+	<script src="../sources/jquery.mobile.datepicker.js"></script>
+</head>
+<body>
+	<div data-role="page">
+		<div data-role="header">
+			<h1>jQuery Mobile Datepicker</h1>
+		</div>
+		<div data-role="content">
+
+			on focus:
+			<input type="text" data-role="date" />
+
+			always visible:
+			<input type="text" data-role="date" data-inline="true" data-theme="a" />
+
+		</div>
+	</div>
+</body>
+</html>
diff --git a/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css b/jQueryMobile-1.4/sources/jquery.mobile.datepicker.css
@@ -0,0 +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; }
+
+.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, 
+.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; }