lopespm / mobiscroll Goto Github PK

Have an event that fires just before a date is actually selected and stored 
into the associated input.  onBeforeSelect or some-such similar naming.

This allows for multiple pickers to be "tied" together via some javascript glue 
to ensure that, for example, a date-range is valid before the picker loses 
focus (and/or code can be provided to automatically adjust another picker in 
relation to this picker's input).

onClose isn't quite sufficient because I need to know the value of the picker 
before and after, not just the newly selected date.

As a workaround, I store a temporary copy of the date beforeShow and then use 
onClose in combination with my temporary copy to accomplish my needs.

What steps will reproduce the problem?
1.Open mobiscroll.
2.Try to select an hour


What is the expected output? What do you see instead?
I try to move the wheel scroller but instead all the page is scrolled

What version of the product are you using? On what operating system?
WP7 Mango (beta2)
Firefox in android (2.2)
Last release of mobiscroll

Thanks in advance.

When running the demo with the jQuery 1.6.1 & jQuery Mobile 1.0b1
it no longer works correctly:

- Date input field becomes disabled, preventing a subsquent click / touch
- On Iphone: datscroller set and cancel buttons don't work anymore

What steps will reproduce the problem?
1. Go to the demo http://demo.mobiscroll.com/
2. Select Clickpick
2. Use the "Set" button to set the current date (in September at time of 
writing)
3. Scroll up or down to 31

What is the expected output? What do you see instead?
Expected that instead of showing 31, it will flip over to 1. Instead, 31 is 
shown and the date in the header is 10/01/2011.

What version of the product are you using? On what operating system?
On demo site with FF5

Please provide any additional information below.
If I change the year before changing the day, the problem doesn't happen

On an ios device, once the user sets the scroller date, the element holds focus 
and doesn't allow you to reopen the scroller with the touch event.  To get 
around this I added '$(elm).blur();' below 'show=false;' in the 'this.hide' 
function.

this.hide = function () {
     this.settings.onClose(this.val, this);
     $(':input:not(.dwtd)').attr('disabled', false).removeClass('dwtd');
     dw.hide();
     dwo.hide();
     show = false;
     $(elm).blur();
     if (this.preset) this.settings.wheels = null;
     $(window).unbind('resize.dw');
}

Dont have an issue.  Wanted to ping folks who have tried using this with 
PhoneGap 1.0 and JQM beta 2.  Any gotchas?  

I will report the results of my progress...

I've added a JqueryMobile Dialog to the same page as my date field. When I open 
the dialog and close it again, the mobiscroll datepicker will show for some 
reason.

Hi, 

I'm using mobiscroll 1.0.1 @ FF 3.6.18

While setting ampm=false at the timescroller, I can't set the time to "0:00" or 
"24:00" because the number in the hour field is missing.

My code is:
            $('#date2').scroller({ 
                preset: 'time',
                ampm : false
            });

Best Regards,
Markus

Is there any way to trigger the onChange ?
Could you add it please.

Thank you



What version of the product are you using? On what operating system?
win7, ff6,

I'm using iPhone 3GS iOS 4.2.1. Browser is stock Safari and I've tried it with 
an addon browser from the App store called Mercury. In both, I cannot get the 
"Set" or "Cancel" buttons to do anything on any scroll. All other functions 
seem to work. Using the demo on this site and the demo available in the 
download (1.0).

What steps will reproduce the problem?
1. Call the scroller like so: 
$("#date").scroller({ dateOrder: 'mmy' });

What is the expected output? What do you see instead?
I wanted mobiscroll to set month and year only. But I also get the day scroller.

Is this supposed to happen? 

If I specifially omit days from the dateOrder, they should not show up, should 
they?

Other than that: GREAT PLUGIN! 


What version of the product are you using? On what operating system?
v1.0.2 Windows XP, FF5

What steps will reproduce the problem?
1. Open either Safari or Chrome (latest available).
2. Zoom in below 100% or out above 100%
2. Open the Date picker control. (you can even see this on demo.mobiscroll.com)

What is the expected output? What do you see instead?
Expected: The control would show correctly and scrolling would work normally.
What happens: Wheels get misaligned + stop scrolling after reaching some item 
(smaller as zooming in more and more). When opening the control while browser's 
zoom is at 100% and changing the zoom after - no misalignment occurs, but 
scrolling breaks still.

Issue is not reproducible in IE or Firefox.

What version of the product are you using? On what operating system?
1.5.1

Please provide any additional information below.
Attached a screenshot.

I do have a requirement to work the hour and minute wheel in circular way like 
if user has traversed to 1-12 then it should start with again 1 instead of 
going back to 1 in backward direction. It is frustrating if take this scenario 
of clock having 9:59 pm, I am having a hard time setting it to 10:00 pm

I recently swapped in the new code and now the scrolling wheels do not snap to 
values, it used to snap to the middle of the nearest value.  Now it does not?

What steps will reproduce the problem?
1. Create Scroller     
    $('.mobiscroll').scroller();    
2. Destroy Scroller
    $('.mobiscroll').scroller('destroy');
3. Click on Input field

What is the expected output? 
The Input field should get the focus and no scroller should appear.

What do you see instead?
The scroller will appear.

What version of the product are you using? On what operating system?
1.5

Please provide any additional information below.
My intention is to popup Mobiscroll with an icon and let the user use the input 
field like a normal input field. In the onClick Event of an image mobiscroll 
will be shown (works fine). In the onClose-Event of Mobiscroll I try to destroy 
the binding of the input-field to mobiscroll. But 'destroy' isn't working.

Do you have any ideas?

BTW: Nice work!

regards
Andreas

What steps will reproduce the problem?
1. add JQuery Mobile js to the demo page
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>


What is the expected output? What do you see instead?
Demo page should render and function without errors. Instead got javascript 
error "Object doesn't support this property or method" when the code trys to 
initialize the scroller:

$('#date1').scrooler();

What version of the product are you using? On what operating system?
The latest (1.0b). JQuery 1.5 and JQuery Mobile 1.0a3.


Please provide any additional information below.
Trying to build a mobile web application using jquery mobile. So I need a 
datepicker suitable for mobile app. The scroller works great with just jquery. 
But I also need the functionalities of the jquery mobile. Please make them work 
together. thx.

What steps will reproduce the problem?
1.Open demo site
2.select an option
3.attempt to change the date

What is the expected output? What do you see instead?
the whole page scrolls instead of the dials turning

What version of the product are you using? On what operating system?
Windows Phone 7 Mango Beta 2 refresh

Please provide any additional information below.

What steps will reproduce the problem?

Run on Android 2.1-update1 with Jquery Mobile 1.0rc1

What is the expected output? What do you see instead?

Underlying input elements "bleed through" scroller.

What version of the product are you using? On what operating system?

Mobiscroll Ver 1.5.1 OS Android 2.1 update 1

Please provide any additional information below.

I see in JS file reference to Android Bug and Bleed Through add class DWTD 
which does not seem to be included in CSS file.

Thanks in advance,

Mark S.

What steps will reproduce the problem?
1. Open scroller.
2. Hit Select, nothing happens

What version of the product are you using? On what operating system?
1.5 on iPhone 4 and Android 2.3?

Please provide any additional information below.
Just updated to the latest version (did not change any code just links) and now 
the scroll wheels popup but do NOT close when hitting set or cancel. 

Please integrate this cool plugin with http://jquerymobile.com

Add option to display 2 or 4 digit year on the year wheel

I have overloaded the javascript Date object to allow non-standard date 
formatting, so your general parsing of the date isn't working correctly.   I am 
specifying the beforeShow function to specify the date that SHOULD be used with 
setDate.  However, inst is always undefined.  Adding the following to 
jquery.scroller-1.0b.js [around line 545] corrects the problem:

    if(!inst) inst = that;

What steps will reproduce the problem?
      $('.task_start_date','#task_create'+myId).scroller({
        preset: 'datetime',
        beforeShow: function(elm, inst) {
          if(inst) {
            var myDate = new Date($(elm).val());
            inst.setDate(myDate);
          }
        }
      });


What is the expected output? What do you see instead?
  when I specify beforeShow, inst should have a value, instead it is "unspecified"

What version of the product are you using? On what operating system?
-- jquery.scroller-1.0b.js
-- Firefox 3.6.8 Windows XP

Please provide any additional information below.

What steps will reproduce the problem?
1. create a scroller attached to a hidden input with a beforeShow function 
defined
2. open the scroller via explicit call: $('#my_id').scroller('show');
3. beforeShow is never called

What is the expected output? What do you see instead?
beforeShow should always be called before the widget is shown

What version of the product are you using? On what operating system?
jquery.scroller-1.0b.js

Please provide any additional information below.
I just added the following to the show function (around line 770), but this 
entire thing should probably be in the main show method (around line 465?)

realy cool datepicker, but I miss a little feature.
Is it possible to set a step for the minute-wheel (or for all wheels)? 

example: option minuteStep:10 
result: wheel will show 0,10,20,30,40,50

What steps will reproduce the problem?
1. Copy the demo code (JavaScript and HTML) into my own personal HTML page.
2. Aside from loading jQuery, I also load the mobiscroll JavaScript and CSS 
files.
3. Then I customize the page so that I have a single TIME field, following the 
example code.

What is the expected output? What do you see instead?

-- Expected to be able to click on the time text field and choose a different 
time.

-- Instead, I get nothing, but Chrome and Firefox are reporting some console 
errors relating to their internal debugging component - every time I click the 
time field.


What version of the product are you using? On what operating system?

-- First I tried some mobiscroll 1.4.x release. Then I downloaded and tried the 
RC version.
-- Running Lion OX on a MacBook Pro laptop.


Please provide any additional information below.

This is what Chrome displays in the console when I click the time field:

This is what Chrome displays in the console when I click the time field:


Error in event handler for 'undefined': TypeError: Cannot call method 'replace' 
of null
    at Object.parse (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:385:223)
    at setupffoverrides (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:88:349)
    at checkgenpwfillforms (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:89:33)
    at receiveBG (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:79:81)
    at [object Object].dispatch (chrome/EventBindings:182:28)
    at Object.<anonymous> (chrome/RendererExtensionBindings:149:22)

What steps will reproduce the problem?
1. place the date text field at the bottom of a long form that requires 
scrolling down to get to it.
2. Click on the text field to call up the datepicker.
3.

What is the expected output? What do you see instead?
Date picker should appear somewhere that's viewable. Instead, it shows up only 
about 10 px from the top of the page, out of sight.


What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1. If selected default month has less than 31 days, 31st day can still be 
selected. This doesn't work if month value has been changed from the default. 
After that the validation works as expected.

What is the expected output? What do you see instead?
I expected that I couldn't select Sep 31st because there's only 30 days in 
September.


What version of the product are you using? On what operating system?
Version 1.5 in Chrome 13.

Please provide any additional information below.

This can apparently be fixed by changing

if (this.preset && s.preset.match(/date/i) && ((i == yOrd) || (i == mOrd))) {

to

if (this.preset && s.preset.match(/date/i)) {

What steps will reproduce the problem?

In Mobiscroll Date and Time picker, in addition to + and – buttons to change 
a number, when you press on a particular number, the number key board should 
pop up,so that you can change to random numbers instead of dialing up or down 
using + and  - buttons 

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
mobiscroll 1.5.2.js
and android 2.3.2

Please provide any additional information below.
please see this one and provided code for this issue.

Thank u 

What steps will reproduce the problem?
1. Create a scroller using a custom wheel (ie. not a date but some other custom 
thing)
2. Click into the scroller and do not scroll at all just push the set button

What is the expected output? What do you see instead?
You should see the first item selected instead you see NaN

What version of the product are you using? On what operating system?
1.5 on Chrome

What steps will reproduce the problem?
1.
<script type="text/javascript">
        var foo = new Date(2009, 7, 7);
    $(document).ready(function () {           
        $('#abreiseInput').scroller({
            dateFormat: 'dd.mm.yyyy',
            dateOrder: 'ddmmyy',
            theme: 'android',
            mode: 'clickpick'

        })
        //hier preset date setzen
        $('#abreiseInput').scroller('setDate', foo, true);
    })
</script>

2.open mobiscroll by clicking into the input

What is the expected output? What do you see instead?

the datepicker is supposed to open with the foo date.
instead the value of the input is changed to foo but mobiscroll opens with the 
current date.

What version of the product are you using? On what operating system?
1.5.1 tested with firefox

Please provide any additional information below.

What steps will reproduce the problem?
When I tab on the label text (Time,  Datetime, Custom) it's work great.
but, if I tab on the "input box" the vitual keyboard is showing before 
mobiscroll


What version of the product are you using? On what operating system?
demo version - samsung galaxy s

Please provide any additional information below.

sorry for my english.... ;-)

Ability to constrain the scrollers to a particular start and end date range.  
Ie., mindate: '1/1/2011', maxdate: '12/31/2011'.  Ability to set each one 
independently or constrain both directions.

Hi. Not really an issue as such, more a suggestion.

When the datepicker opens, the order is Month/Day/Year

I can change the format of the textbox to be dd/mm/yyyy, but there is a bit of 
inconsistency.

So if I could order the datepicker itself, that would be great.

Really love this plugin by the way :)

There was the wrong method referenced.

Not so much a problem as much as a feature request.

I'd like to be able to easily specify minutes that are displayed by default.  
For example, setting a "stepMinute" parameter to 15 will only show 15 minute 
increments in the dial.

I have modified the 1.0rc2 script (see attached) to do this for minutes (which 
is all I currently require), but I could also see this setting for any of the 
other fields.

Not really an issue, per-say.

Wondering if it could be modified to work inline on a web page (non-popup). I 
figure you could use a hidden field to store the value, but (being quite new at 
jQuery) I'm not sure how I'd make the date picker show by default (in a 
sidebar, for example) and only show the 'set' button.

Is this possible? Thanks!

Make use of TAB to navigate from wheel to wheel and arrow keys to scroll the 
wheels.

Does not become android 2.2 Hangul (Korean alphabet) input.

What steps will reproduce the problem?
1.  Load a page with the scroller...
2.
3.

What is the expected output? What do you see instead?
Scroller pops up almost immediatly, and definitly within 1 second.

What version of the product are you using? On what operating system?
iOS 4 (latest)

Please provide any additional information below.

In the demo.html file you're trying to include the css / js looking in the 
wrong path:

<script src="js/mobiscroll-1.5.2.js" type="text/javascript"></script>

    <link href="css/mobiscroll-1.5.2.css" rel="stylesheet" type="text/css" />

The css and js files are not in folders, therefore it gives a 404 error.

Would be nice to selectively hide the "selected date" header in the "dwv" div.  
Additionally, ability to show/hide the scroller headers (month, day, year) so 
only the scrollers and buttons show.

This patch makes it possible to set the maximum amount of hours the user can 
select. This was useful in my scenario, in which mobiscroll was used to set the 
time in a stopwatch.

It will give you an additional 'maxHour' property, which you can set to e.g. 72 
(so the user can choose from 0-72 hours in stead of 0-24). Note: this only will 
work when 'ampm' is false and 'preset' is set to 'time'.

{{{
# This patch file was generated by NetBeans IDE
# It uses platform neutral UTF-8 encoding and \n newlines.
--- HEAD
+++ CURRENT
@@ -473,12 +473,13 @@
                     s.wheels.push(w);
                 }
                 if (s.preset.match(/time/i)) {
+                    s.maxHour  = (!s.preset.match(/date/i) && s.maxHour && 
!s.ampm) ? s.maxHour : (s.ampm ? 13 : 24); //only works in timepicker, with 24 
hours notation
                     s.stepHour = (s.stepHour < 1) ? 1 : parseInt(s.stepHour);
                     s.stepMinute = (s.stepMinute < 1) ? 1 : parseInt(s.stepMinute);
                     s.stepSecond = (s.stepSecond < 1) ? 1 : parseInt(s.stepSecond);
                     var w = {};
                     w[s.hourText] = {};
-                    for (var i = 0; i < (s.ampm ? 13 : 24); i += s.stepHour)
+                    for (var i = 0; i < s.maxHour; i += s.stepHour)
                         w[s.hourText][i] = (i < 10) ? ('0' + i) : i;
                     w[s.minuteText] = {};
                     for (var i = 0; i < 60; i += s.stepMinute)
}}}

Example of using this:

{{{
$('#date1').scroller({
    "preset": "time",
    "ampm": false,
    "seconds": true,
    "maxHour": 72,
    "timeFormat": "y-m-d HH:ii",
    "onSelect": function(text, scrollerObject) {
      console.log(scrollerObject.values); //returns e.g. [72,0,0] when user selects 72 hours
    }
  });

}}}

What steps will reproduce the problem?
1.Go to demo
2.Set time in time control to 12:12 AM
3.Set and reopen the control
4.Control shows 12:12 PM

What is the expected output? What do you see instead?
12:12 AM

What version of the product are you using? On what operating system?
1.5.1

Please provide any additional information below.
The bug is in parseDate function. 

if (ampm && hours < 12) 
hours += 12;

should be 

if (ampm && hours < 12) 
hours += 12;
else if (!ampm && hours == 12)
hours = 0;

For touchscreen devices that don't support the drag gesture (there are a lot), 
it would be nice to be able to tap above or below each number in a segment to 
navigate up/down like a spinner control.

What steps will reproduce the problem?
1.configure (Theme: SensUI , Mode :ClickPick)
2.Click on +/- button..
3.It's not working in (Nokia E-63)/BlackBerry  Mobile

What is the expected output? What do you see instead?
Action is not working Properly...
Same thing working in http://dev.jtsage.com/#/jQM-DateBox/

What version of the product are you using? On what operating system?
1.5.1

Please provide any additional information below.
Some problem with code...
I think its written onTap or Some other function.. it should be handled for 
Onclick Function too..

What steps will reproduce the problem?
1. Try to open a page with a Mobiscroll control on a WebOS Browser

What is the expected output? What do you see instead?
Entry of calendar are not show as desired.

What version of the product are you using? On what operating system?
WebOS v2.0.1
Mobiscroll v1.5.2

What steps will reproduce the problem?
1. Create a datescroller, f.ex:
  $('#date1').scroller({
    preset: 'date',
    dateFormat : 'dd.mm.yyyy',
  });
2. ... and an input field with a predefined value:
  <input type="text" name="date1" id="date1" value="01.01.2011" />


What is the expected output? What do you see instead?

When clicking into the input field, the scroller inits with the current date, 
not with that from the value of the input field.

What version of the product are you using? On what operating system?
v1.5.1 @ ubuntu 10.10 Firefox 3.6.26

Please provide any additional information below.

I attached a sample with a workaround for this special scenario.
Somehow the exception 'Missing number at position x' is thrown.
In function parseDate, inline function getNumber before returning a value, I 
added:
if(size == 4) iFormat += 2;

What steps will reproduce the problem?
1. Look at the year part of the scroller

What is the expected output? What do you see instead?
I'd like to configure the year to be displayed as 2011 instead of 11. Now the 
2-digit format is hard-coded.

What version of the product are you using? On what operating system?
Mobiscroller 1.5.

Please provide any additional information below.
The format can be changed from the code by changing the line

w[s.yearText][i] = s.dateOrder.search(/yy/i) < 0 ? i.toString().substr(2, 2) : 
i.toString();

to

w[s.yearText][i] = s.dateOrder.search(/yy/i) < 0 ? i.toString().substr(0, 4) : 
i.toString();

This could be provided as a general option.

On iPhone iOS 4.3 with jquerymobile (beta1 and beta2). If I have a this object:

$(''#object').scroller({ preset: 'datetime', seconds: true,ampm : false,theme: 
'sense-ui', dateOrder:'mmddyy'});

and set a data via the setDate method as follows:

 $('#object').scroller('setDate', new Date());

when I click on the textfield and the wheel is shown the value on the top of 
the field is not correct. For instance, I have 08/05/-1, if I change the year 
by the wheel is set correctly.

Moreover, it is possible to add the function that does not allow to the user to 
choice a date before one that I fix... for instance, if I have to book a flight 
 return date must be after the leaving date.

mobiscroll does not seem to work on the blackberry OS 6.0 browser (webkit). The 
buttons set and cancel work. However the scroll (or clicks in the clickpick 
mode) does not work. 

Blackberry OS6.0

To reproduce the problem you can use the blackberry browser to go to 
http://demo.mobiscroll.com/

Thanks