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.mobipick( "open" );
            });
            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>
                

Customize order of controls in popup

			var picker = $( selector ).mobipick({
				// dateFormat controls the format of the output string
				// whereas this controls the order of the controls
				// in the picker popup.
				// Default is "d m y"
				// Here we request ISO 8601 order instead
				inputOrder: "y m d"
			});

<input type="text" />