Mobi Pick - Advanced demo

Datepicker with default date

Mobi Pick recognizes the value attribute as the default value.
<input type="text" value="2008-10-17" />

Datepicker with min and max date (for example, dates in 2011)

Mobi Pick recognizes the min and max attribute automatically.
<input type="text" min="2011-01-01" max="2011-12-31" />

Datepicker in spanish

<input type="text" />
Set the locale like this
				$( selector ).mobipick({
					locale: "es" //default is "en", english
				});

Monthpicker (no native support)

<input type="text" />
Set the accuracy to month like this
				$( selector ).mobipick({
					accuracy: "month" //default is "day"
				});

Yearpicker (no native support)

<input type="text" />
Set the accuracy to year like this
				$( selector ).mobipick({
					accuracy: "year" //default is "day"
				});

Yearpicker with min and max date (no native support)

Mobi Pick recognizes the value, min and max attributes automatically. Set the accuracy to year like this
				$( selector ).mobipick({
					accuracy: "year" //default is "day"
				});
<input type="text" value="2012" min="2010" max="2014" />

Datepicker with dynamic min date (no native support)

Set the min date four days from now
				$( selector ).mobipick({
					minDate: (new XDate()).addDays( 4 )
				});
<input type="text" />

Range pickers (no native support)

You need to make use of the change event
					var mpFrom = $( ".min-date" ).mobipick();
					var mpTo   = $( ".max-date" ).mobipick();
					mpFrom.on( "change", function() {
						mpTo.mobipick( "option", "minDate", mpFrom.mobipick( "option", "date" ) );
					});
					mpTo.on( "change", function() {
						mpFrom.mobipick( "option", "maxDate", mpTo.mobipick( "option", "date" ) );
					});
<input class="min-date" type="text" />
<input class="max-date" type="text" />

Human readable dates

Default output is international standard date (YYYY-MM-DD). If you want to use the localized dates, use these settings
					$( selector ).mobipick({
						intlStdDate: false
					});
<input type="text" />

Reset date

Deletes the previously selected date.
			var picker = $( selector ).mobipick();
			$( linkSelector ).on( "tap", function() {
				picker.mobipick("option", "date", null).mobipick("updateDateInput");
			});
<input type="text" />
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext"></a>

Custom date format

			var picker = $( selector ).mobipick({
				dateFormat: "MM-dd-yyyy"
			});
<input type="text" />

Programmatically open picker.

            var buttonPicker = $( "input", this ).mobipick();
            $( "button" ).on( "tap click", function() {
                buttonPicker.trigger( "click" );
            });
            buttonPicker.on( "change", function() {
                // use the date after confirmation
                window.alert( buttonPicker.mobipick( "date" ) );
                // or alternatively
                // window.alert( buttonPicker.mobipick( "dateString" ) );
                // window.alert( buttonPicker.mobipick( "localeString" ) );
            })
			    
<input type="hidden" />
<button type="hidden" value="click to open picker"/></button>
                
Created by Christoph Baudson. Feel free to check out my blog.