sustainablepace / mobipick

Android-style datepicker widget for jQuery Mobile

THIS PROJECT IS NO LONGER MAINTAINED!

Mobi Pick

Light-weight Android-style datepicker widget for jQuery Mobile. 3KB minified and gzipped.

Build status

Changelog

0.9

• refactored dialog to use the jQuery mobile popup widget

0.8

• updated to be compatible with jQuery mobile 1.3.0RC1, jQuery 1.9.1, XDate 0.7, Modernizr 2.6.2, QUnit 1.11.0 (version 0.7 branch for compatibility with legacy versions exists)

0.7

• Issue #5
• new public method updateDateInput
• possible to set date to null

0.6

• set minDate/maxDate programmatically

0.5

• range picker support
• custom output format (boolean option intlStdDate)
• set default date programmatically (String|Date|XDate option date)
• Issue #4

0.4

• IE7 support
• picker closes on Escape keyup

0.3

• added accuracy option for month and year pickers

0.2

• changed css class prefix from datepicker to mobipick

0.1

• initial version

mobipick's Issues

open from jquery mobile popup

mobipick does not open from text input which is located inside jquery mobile popup.

Click event bubbles to below screen in android

Testing with android galaxy s.

The Date dialog pops up and when I click any button in the dialog [date, year , accept, cancel..] which is positioned above other controls in parent page (say input box), the event bubbles to the parent page as well.

Any workaround to prevent the event bubble

"clear" button

could it be useful to add a button that empties the input field?

Click event leaks to screen below

The problem reported in Issue #6 is still there.

If the accept button happens to appear on top a input element, the click event will leaks to the input element below, opening soft keyboard.

This issue seems to affect all Android versions.
see https://code.google.com/p/android/issues/detail?id=6721

Auto increment day/month/year

when you tap an input field to open mobipick. If the position of your tap is the same than a "+" or "-" button. Mobipick keep the tap event an automaticly increment ("+") or decrease ("-") the day, the month or the year depending on the tap position.
in the same way, when you open mobipick, if the position of the tap is the same position as button "Cancel", mobipick it closes immediatly.

Tests with Ipad & android

month and year not changed on changing day

I have a problem with mobipick plugin. it's not working properly as calender works.

month and year are not changing when i decrease day from 1, it replaces day by last day of selected month and month remain same, but i want that it replace month to previous month and and day to last day of previous month and vise a versa and also same mechanism with year coloum.

Example:

Initially

Result

Expected

Thanks in advance

"Invalid date" with defaut value and date format

$( selector ).mobipick({
    dateFormat: "dd/MM/yyyy"
});

Mobipick with Angularjs

Is there any way to use this with angularjs? If I am using this with jquery mobile means didn't work perfectly. If it work with angularjs means that would be very nice for me.

add public setOption method

Hi
I love it ! I will use it also on Ipad / Iphone. Thanks for sharing

I add a setOption public method in order to change dynamically minDate / maxDate and date parameters.

setOption: function( key, value ) {
    switch( key ) {
    case "date":
    case "minDate":
    case "maxDate":
        this._setOption(key, new XDate( value));
        break;

    default:
    }
},

Android-Style Date Picker For jQuery Mobile - Mobi Pick

How to set Date on textbox & Popup

Is there a way to use this date picker without including the jQuery Mobile's css file?

I really like the functionality of this picker, but including the jQuery Mobile css file just wreaks havoc on my site. Any way to get around his?

Is there a way to lock min date to 3 months before?

I am using mobipick for cheque date... so i want to lock the min date to before 3 months date..cn u help me out of these?
One more thing that input box on which i am applying date picker, is dynamically created

Is there a way to disable mobipick in a temporary manner

Hello,

I would like to disable the date field in some case and renable it later.

What will be the best way to do this with mobipick ?

Regards,

Loic

Is it possible to also create a time picker?

If the initial date is selected, the input remains empty

Input without value, Mobipick without options. The picker opens onClick, after clicking "accept" the date is not displayed in the input field.

Date value not visible on iOs5

Environment : Safari + iOs 5 + JQM 1.0 + Mobipick.

The date value is not visible in the input field .
When selecting a date, the change event fired , but the field has no value.

Works well on Android, Chrome , Safari / MacOsx, and ... iOS 4.3.2 and previous.
issue occured also on iOS 5 simulator.

I add a log on updateDateInput

_updateDateInput: function() {
    this.element.val( this.dateString() );
    console.log('update value to ' + this.dateString() + ' => ' + this.element.val());
}

output :
updateValue to 30-12-2011 =>

Uncaught TypeError: Cannot read property 'widget' of undefined

Mobipick display in jqm 1.4+

Any way to integrate mobipick to visually work better with jqm 1.4+ themes? The standard popup with theme 'a' does not display well with white background, IMHO, I prefer the standard theme options that were used with mobipick in jqm 1.3+.
1.4:

1.3:

iPhone 3G support

It seems the native browser of the subject device does not support input type date and the mobipick() control does not appear. Have you tested it on 3G ? thx and best regards,

Day will not go above 27th September on Mobile Safari, when on NZ time zone.

On mobile safari (iOS 7, tested on iPhone/iPod and iPad) the day will not go above September 27th when the year is 2014, it won't go above 26th on 2015 and so on. I haven't seen the error in Safari on pc or any other browser, including on Android devices.

I assume it is related to New Zealand daylight savings time, as my Time Zone is set to 'Auckland, New Zealand' on the device, but if I change to a different Time Zone I can no longer reproduce the error.

Daylight Saving Time in NZ for 2014 is 28 Sep 2014, so it seems related.

This is reproducible on the demo page, on mobile safari, with Time Zone set to Auckland, New Zealand.

Can MobiPick display year in Buddhist Era?

Dear Sir,
I am Thai, I have used your MobiPick to display my mobile web, and I want to know about it "Can MobiPick display year in Buddhist Era?". Please explain it for me.
Thank you.
Prach Konphet

Issue on reset from date.

Hi, I installed the plugin on JQM 1.3.2 and I set a range date picker "From Date" and "To Date". I used the code you listed on the demo. And I make a function to reset these date pickers to default after user clicking search button. However, the "From Date" is reset the value to the date which was in "To Date", the value of "To date" is reset correctly. I tried to walk around but I can't. Could you please look into that? Thanks.

Code is attached.

Date Picker event handler
mpFrom = $("#fromDate").mobipick();
mpTo = $("#toDate").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" ) );
});

Reset Date Picker Function
function clearFilter() {
mpFrom.mobipick("option", "date", null).mobipick("updateDateInput");
mpTo.mobipick("option", "date", null).mobipick("updateDateInput");
}