acidb / mobiscroll Goto Github PK

Select preset missing feature multi-selection

On desktop when a user pressed tab on a mobiscroll (date time scroller) input a MODAL show on their screen with dates without them knowing what is it for. I suggest we put a modal title on modals to make it more user friendly.

First I would also like to thank the authors for building, releasing, and supporting this project. I am actually using a native DatePicker plugin with Cordova/PhoneGap but it will not work with a web version for testing so I hereby use mobiscroll for the web test version.

In my app design, I would rather use JQuery Mobile anchor buttons instead of input fields to show the selected date. The user simply clicks the anchor button to open the date picker. This is working very well with the native DatePicker plugin but unfortunately mobiscroll is always binding to the focus event and never binding to the click event. I tried a quick modification to bind to the click event and it is working. I think some others may find it useful also to bind to anchors and/or buttons, so I raise this enhancement request to make this idea working by configuration.

It seems that there is an error in line 474 of mobiscroll core:

mod = document.createElement('modernizr').style,

argument mod should be replaced by 'mondernizr'.

We discovered this when trying to use stealJS to compress scripts.
For a reason I don't explain, it works when using mobiscroll alone.

Thanks,

while setting the value of date works fine, setting datetime does not work and opens the mobiscroll with a wrong date.

A little bird with iOS6 Beta on her iPhone told me that mobiscroll doesn't work on it. Tested on http://demo.mobiscroll.com/ . Clicking on the text field doesn't open the date selection popup.

Hi,

Maybe I'm not using the method correct, but if I try to set an option on a calendar instance I get the following error: "Maximum call stack size exceeded"

$('input#test', activePage).mobiscroll().calendar();

var maxDate = new Date();
maxDate.setDate( maxDate.getDate() + 14 );
$("input#test").mobiscroll('option', 'maxDate', maxDate);

I'm using:

1. Jquery + Jquery mobile.
2. A combined download of Date Time & Calendar

Setting the maxDate does work when using .date() instead of .calendar().
It seems the error occurs on all options set after init.

This example doesn't work either on .calendar();
$("input#valid_until").mobiscroll('option', 'firstDay', 2);

iOS date widget will loop, but I couldn't find how to that with mobiscroll. Is it supported?

Thanks a lot for that great tool. It would be great that this plugin could use some of the new HTML5 form features (time related input types). It has been a headache to try and see that mobile devices never update the input value, something that desktop browsers did.

I am testing mobiscroll in a jqMobi environment. When I attempt to load more than one scroller (jqMobi version) library I get the following javascript error: "Uncaught RangeError: Maximum call stack size exceeded"

This issue can be reproduced as follows: Download the Datetime scroller and the Select scroller. Copy the select scroller js file into the Datetime sample code js folder. Edit the index file to include the select js file. I am using chrome - open index.html & you will see the error - too many 'a.extend' calls break the stack.

Hi all,

1 - If I use mixed mode in adroid and after I click arrow, the value is changing two times. for example if the current value is 24 and after one click on arrow, the value jumps to 26 and it is not possible to select 25 afterwords without scrolling.

2- in clickpick mode if you click arrows on mobiscroll the value is decreasing, but if you do the same on native pickers value is increasing. Is there any way to configure this.

Thanks,
Have a nice weekend

Hello,

In version 2.4 i am not able to show or set time between 00:00 and 01:00, in time scroller, in clickpick mode.

the scroll passes the hour from 23 to 01,

i tested with demo code and with following options:

theme: 'jqm',
lang: 'pt-BR',
display: 'modal',
headerText: "Fim: {value}",
animate: 'fade',
ampm: 'false',
timeFormat: 'HH:ii',
mode: 'clickpick'

in online documentation i wasn't able to find any solution for this issue.

Thanks in advance

In the position function all calls that used outerWidth() and outerHeight() without the true parameter returns an object rather than an integer value.

According to the select preset documentation, there is an “invalid” option that contains an array with the invalid values. If empty, the preset takes the disabled options from the original select element.
I am not using the invalid option and the evens are triggered.

If I'm at http://example.com/mobi#page2 and hit the back button to go to http://example.com/mobi#page1, the modal dialog doesn't disappear. This may be by design, is it?

When these two connect the plug-in, because the document is hinged to move the event, there is a bug with the overall scrolls the page (it starts scrolling jerky)

there is bug code:
line 619: $(document).bind(MOVE_EVENT, function (e) { //..

The string passed for the timeWheels option does affect which elements are shown, but mobiscroll disregards the order of those elements.

From a user perspective, if mobiscroll shows 11am, and I'd like to select 1pm, I would expect to be able to scroll down on the hours field and see the ampm automatically adjust. Mobiscroll doesn't work that way. The inverse, however, does work... changing the ampm field will affect the hours field. Since this is true, the hierarchy of information seems to be backwards. For me, this gave me the desire to place the ampm field FIRST. The timeWheels option does not allow one to change the order of these elements.

Hi there,

First of all, thanks for the really good work on mobiscroll.

I was wondering if it could be possible to add a display: 'desc' option, that would display numbers in a descending order ? Seems like my Android 2.1 phone does it this way, I don't really know about other devices and their way of handling wheels. Maybe it could be disturb some users, so the option would be nice !

Thanks !

Work with 10 min/20 min/1hr/.... steps in DateTime mode.

Thanks a lot for that great tool.
it would be awsome that this plugin support jQMobi.
how?

After upgrading from 2.1 to 2.2 the following code is not updating the associated input field.

$('#StartTime').scroller('setDate', d, true);

The associated input field does get updated after the date is selected in the control. But trying to set it from the code using the above command doesn't work.

Hi guys,

I'm facing a huge UX issue: A have a form with selects field (not handled by mobiscroll) and with some mobiscroll fields based on fields and some simple input fields (not "mibiscrolled"). I'm looking to make mobiscroll more userfriendly. So I added button3 (with float left) and changed the labels of button3 & cancel button (+ the right handlers). But I can't find a transparent way to jump from native previous/next button to a mobiscroll instance.
I always get the keyboard shown for some hundreds milliseconds before to get the mobiscroll shown.

FYI, my mobiscroll instances are some custom "double" wheels.

Any ideas?

I'd like to suggest to disable "button" elements, and possibly "a" elements when the bubble/pop-up mode of Mobiscroll is showing.

The reason is that I have a modal form with a "Cancel" button, and currently a user can click it while Mobiscroll bubble is showing, causing the modal form to close but the Mobiscroll lingers there. I imagine there are many other cases of using Mobiscroll with ajax that yield similar awkward effects.

As a hack, I simply replaced the string "input,select" with "input,select,button" in mobiscroll-2.3.js and it seems to be working as I'd like it.

In issue #8 I suggested an enhancement to work with anchors and buttons by making a flexible or intelligent selection of which event(s) to bind to. However, since my project is tied very closely to the native DatePicker from Cordova/PhoneGap, I would like a date/time picker that is very similar for my web test version.

The native DatePicker from PhoneGap provides a function to open the date picker, taking a callback to receive the date that has been selected. This can be an excellent interface for certain other situations, such as GWT which normally does not even deal with JQuery elements.

So far, I have made a version of demo.html in my fork to show some functions that can be used to open the date/time picker, and report by a callback function which date is selected. In this demo, there is a trick where the form elements are kept in a hidden JQuery Mobile page div and the desired behavior with the anchor buttons is shown on the first page div.

This is enough for me to use the mobiscroll in my own project, but I would like to see some enhancements in the future to work better with projects that are not using the default JQuery elements. When I get some spare time, I would like to make some enhancements in my fork that I will propose to the mobiscroll project.

There is a visual problem in IE9 that selection of a predefined value control can not round as in iPhone. On the other hand its is okey with firefox and IE10 Beta. It is difficult to round control in touch screens. We have tried in many different computers. It can be easily seen with IE9 environment at http://demo.mobiscroll.com/select/rtlsupport

Thank you

If 3 rows are visible in the scroller, and the user tries to tap on the top or bottom value, the row should scroll into view.

1. First , please set a datetime for a input text,
   For example :
   input id="dateTest" name="dateTest" value="2013-01-03 17:29:28"
2. Second :
   $("#dateTest").mobiscroll().datetime({
   theme: 'default',
   display: 'modal',
   mode: 'mixed',
   dateOrder:'yyyymmdd',
   dateFormat:'yyyy-mm-dd',
   timeWheels:'HHiiss',
   timeFormat:'HH:ii:ss',
   startYear: new Date().getFullYear() - 10,
   endYear:new Date().getFullYear() + 10,
   showNow:true
   });
   });
3. When you open the page on your browser and click the input, The Mobiscroll
   will show a time 2003-01-03 17:29:28; It is a error time , because the year is not 2013, but is 2003.

the bugs only exist in mobile phone, not in desktop. my phone is galaxy s2 android 4.0.4 stock browser.
bug 1
the scrolling will stop at middle of two numbers, happened randomly.
bug 2
the changes to the day and month are moved to after animation, but the changes will not happened everytime. I remain using 2.2 as this bug is not there. please allow website to choose download various version.

System: Android 2.3.4
Device: LG
Model number: LG-P990
Kernel version: 2.6.32.9
LGE Version: LGP990-V20q

Select preset options are not aligned:

I have a select preset with 20 options; one option has a “very long item text!!!!!!!!!!!!!!”, this causes the other items to not be aligned.

Hi,

To reproduce the problem from the subject line:

1. change the demo example to use just one wheel:

   var group = {};
   var wheels = [group];
   var wheel = {};
   for (var j = 0; j < 100; j++) {
   wheel[j] = j;
   }
   group['Fruit'] = wheel;

   $('#custom').scroller({
   width: 400,
   wheels: wheels
   });

2: for the input field set the default value to empty:

<div data-role="fieldcontain">
    <label for="custom">Custom (Fruits :D)</label>
    <input type="text" name="custom" id="custom" class="mobiscroll" value="" />
</div>

Click on the input (do not scroll), and then just click set. In the input, the value -1 will be set. If you repeat the process, you will get -2, -3, etc.

I'm expecting it to be 0, the first and also selected element from the wheel.

Thanks,
Ioana

Would you please implement an option for scrolling a wheel horizontally, instead of just vertical?

This affects directly the user experience because most browsers have a single process that is shared between JavaScript execution and user interface updates and only one operation can be performed at a time.

If I have an onChange event handler that makes a lot of calculations the UI becomes locked.

This is happening with the current demo version:

http://demo.mobiscroll.com/datetime#mode=clickpick&theme=jqm

When I go to download 2.4.1 date & time scroller, it lets me pick which platforms and I omit Windows phone. But the zip file contains two .png files which I assume are specific to Windows Phone, wp_icons.png and wp_icons_light.png. I checked the js and css and don't see them referenced so I think I'm safe. Just thought you should know in case you can set these to be conditionally ignored.

The + and - scroll buttons are not hiding the values beneath them on the kindle fire HD.

Appears to only be in a webview.

Settings used:
$(element).scroller({
preset: 'date',
setText: 'Accept',
headerText: headerText,
showLabel: true,
theme: 'default',
display: 'bottom',
mode: 'mixed',
animate: 'slideup',
dateOrder: 'mmddyy',
dateFormat: 'yyyy/mm/dd',
maxDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
minDate: new Date(1999, 0, 1)
});

I wonder if it is possible to have an infinite wheel, eg. with an image scroller. So that after the last list entry the first one will show up and vice versa. If it is not possible yet, this should be a feature request

Seems like maybe both a click and touch event are firing?

Whatever the cause, mixed mode works properly in my browser, but increments/decrements by 2 on my Galaxy Nexus using mobiscroll version 2.0.3.

Hi, I have a permanently displayed date scroller. I'm trying to capture the initial formatted date (i.e. today). There doesn't appear to be a way to retrieve this; at least, I can't find it.

The place I would expect to find it is onShow. But here, the first parameter returns the scroller's div container html, and the instance has val set to null, although values does contain an array of the appropriate values.

Is the formatted value available somewhere?

I'm probably not in position to say this is really a bug, but I need to be able to have a callback triggered when a date is selected using mobiscroll. The callback serializes the form and posts it. I think it's a bit weird that all input fields are still disabled when onClose is called…?

I posted a question on SO: http://stackoverflow.com/questions/10537411/jquery-form-doesnt-serialize-my-date-field-when-triggered-from-mobiscroll

Sorry to open a issue if this is not a bug. I might just have missed something in the API. Please close this and point me in a direction how I can better achieve what I need!

Thanks,
Viktor

System: Android 2.3.4
Device: LG
Model number: LG-P990
Kernel version: 2.6.32.9
LGE Version: LGP990-V20q

Select preset options are not aligned to the center:

I have a select preset with 20 options; the option number 3 has a “very long item text!!!!!!!!!!!!!!”, this cause the other items to be not aligned to the center.

Details here: http://stackoverflow.com/questions/14678963/wheel-numbers-visible-outside-wheel

Hi Mobiscroll, let me start by saying I LOVE your datepicker control.

One request for accessibility purposes, it would be nice if:

1. Mobiscroll appeared in the standard tab order

2. You can use TAB or LEFT ARROW to jump to the next dial (e.g. year -> date -> month), or SHIFT+TAB or RIGHT ARROW to jump to previous dial.

3. You can use DOWN/UP ARROW to increment/decrement by one tick. May want to include an option whether to reverse the y-axis as well.

4. Bubbles/pop-ups/pop-downs should also be accessible by tab order as well

Cheers!

Hi,

This is a great plugin, but it's kind of small to use on an android/iOS device and there's noticeable lag.
Perhaps adding CSS3 acceleration for compatible mobile/desktop browsers?

Thanks.

It occurs when changeWheel is used and value height is > 64px

Hi guys,

Here I'm facing a sticky bug for which I can't find a workaround.

I have a form that use some inputs, select and mobiscrolls.

Repro:

• Zepto
• on ICS
• with ICS theme
• display: bottom
• some select visible behind the .dwo element.
• mobiscroll instance show

bug:

• the select options are disabled but the select still open on tap (even with the dwo (overlay)).

I tried to stop propagation or prevent default on tap on select but it seems to not be applied.

On rails when compiling with SASS, this css fails.

This part is defined like this
li.dw-hl{background #fff;background:rgba(255,255,255,.3)
instead of
li.dw-hl{background:#fff;background:rgba(255,255,255,.3)

It is missing " : " after background and before #fff

Thanks

setValue is not working for setting an initial default value without populating the input field

This is more of an enhancement...

Right now the position of the scroller is set by default to the center of the viewport.

It would be nice to have an additional option for positioning the scroller at the bottom, as it would be on a native iOS app.

Thanks,
Ioana

I just tried upgrading from 2.0.3 to 2.4, and noticed that the datetime scroller would occasionally not set the new date after I clicked Set. I eventually figured out when it happens: if the wheel is still moving. To repro, give it a good spin, and click Set while it's spinning. In 2.0.3 it would catch whatever date it was at in its spin. In 2.4, it keeps its original value, as if you had not changed the date.

Example visible on my site:

http://www.lairout.com/events/?bbox=174.59609985351562,-41.36985239769951,174.94972229003906,-41.21301287224784&start_date=09-01-2013&end_date=10-02-2013

It works fine on firefox, on chrome and android phone it triggers the html element underneath click

Also on Chrome it breaks often, unsure where and what, on other pages seems to be ok