Hi, I would like to customize the scroller with the year with 4 digits. How can I do it?

Hi,I'm not the developer but I think I can answer your question. Essentially, you need to set the dateFormat option:

$("#date_picker").scroller({dateFormat : "yymmdd"});

The string ("yymmdd" for example) specifies how the date should be returned. In this case, today would be 20110721 but that's just how I wanted it. However, as you can see having the year represented by yy makes it a long year (4 digits). You could make it "dd/mm/yy" to get 21/07/2011 etc.Just experiment to see what gives you what you want.

^^ Thank you very much for your comments. But it seems you misunderstand my question. I would like to know how to simply customize the 3 scrollers for (year (11), month(01), day(20) -> year (2011 not 11), month(01), day (20) ) not its output as you said.

I found the code for customizing it already, thanks.

just modify the following code in jquery.scroller.js:

for(var I=K.startYear;I<=K.endYear;I++){D[K.yearText]I?=I.toString().substr(2,2)}

for(var I=K.startYear;I<=K.endYear;I++){D[K.yearText]I?=I.toString().substr(0,4)}

can I have circular wheels in scroller?

Let me clear my question- 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. There are no numbers after 59 one has to go backwards from 59 to 00 to set the time to 10:00 pm. Please advise...

Hi, I want report a bug... in the set date methods... If I set a date the methods set wrong the year, it put only the last digit instead of the full year.

for instance if i set $('#object').scroller('setDate', new Date());

it set correctly the 07/27/-1 instead of 07/27/2011.

Could you help me? Moreover, If I want to avoid a date before than a fixed one, which method I have to use?

Hi to all. Please submit your bugs and feature requests in the issue tracker (under the Issues tab). I entered the requested features, you can star it in the issue tracker and you will be informed when it's implemented.

Thanks for using MobiScroll?!

Hi!

What would you think about a "momentum" feature like in the iOs Date Picker?

Hi!

Is it possible to attach the scroller to a button rathar than an input text field? I tried and it seems to works on Firefox but not on Chrome or Safari (Iphone 4)...

Thanks

The button is created as that:

<a href="#" data-role="button" data-icon="search" id="btn_date">Search on date</a>

In fact this binding don't works for buttons

$(elm).addClass('scroller').unbind('focus.dw').bind('focus.dw', function (e) {

If I replace "focus.dw" by "click", the scroller is well displayed.

A little Hack is to add the following lines to force the focus in the button (link):

$('#btn_date').click(function() {

$('#btn_date').focus();

Focus event is not always thrown when a user click on elements. See http://bugs.jquery.com/ticket/7768

It could be interesting to bind a "click" event to avoid all problems.

Hi All, Can someone help me out here with the MobiScroll? script? I have it working perfectly except I don't know how to add the date that is picked to get placed into the mysql database. I have just the "date1" option of the MobiScroll? that I want working for my website. I am pretty much a newbie when it comes to javascript. This is what I have on my PHP code to try to put the date that was picked into the database.

Here is my simplified PHP code that I am trying to get the date into the database:

$theDate = $POST['date1'];

$query = "INSERT INTO service (service_date) VALUES ('$theDate')";

The "service_date" column just keeps showing "0000-00-00".

Again thanks for any help in advance.

I found the solution a short time after posting my question.

All I had to do was change the date format from dateFormat: 'mm/dd/yy' TO dateFormat: 'yyyy/mm/dd'

Very nice. Thank you! Few questions though: 1. Where is the documentation for changing themes and modes? 2. How to update the date displayed when the wheel is opened from the underlying text value changing? 3. Can start & end ranges be set to only allow certain dates to be selected?

1. Documentation is now updated 2. I don't really understand this question 3. Currently there is no built in support for min/max date, but we consider implementing this in a next release. What you can do right now is to add an onSelect event handler, where you can check the selected date, and set another date if it's not in the right range.

1. Thanks! That was fast. <br/> 2. To clarify, I'm using it with the KnockoutJS library for data binding. Therefore, after the screen initializes, the <input> tag's value may be updated if the underlying model changes. In this case, when the date picker opens, it still shows the date held by the input tag at load time instead of the current value. So I just need the preferred way to update the wheel so it syncs with the input tag value when it opens. <br/> 3. This would be a great feature to add. I can use the onSelect for now to validate the selected date. Thank you.

Think I figured out #2, or at least have something that works. I use the beforeShow event and call setDate within it with the current input value. Is the the "right" way to do it?

  // setup date pickers
  $("input.date").scroller({ theme: "sense-ui", mode: "clickpick", dateFormat: "mm/dd/yy", startYear: 1910, beforeShow: function(input, inst) {
      inst.setDate($.scroller.parseDate('mm/dd/yy', input.value));
  }, onSelect: function(valueText, inst) {
      // validate range here
      alert(valueText);
  }});

I think it's ok. Another option would be, to call setDate on the <input> tag's change event. But this would work only, if KnockoutJS fires the change event, when updating the imput value.

Good idea. Knockout has a subscribe method that lets you subscribe to changes and setup a handler. This could be used as well to call setDate.

Is there any way to have "stacked" scrollers -

Something like

Scroller 1-Date, Time Scroller 2-Option 1, Option 2, Option 3

Thanks

Hola, tengo un problema, quisiera hacer un submit de un formulario, de forma automática al seleccionar una fecha y presionar "Aceptar". Alguna ayuda?. gracias!!

hello,

Is there a way to display just the month and the day? I'm using the "ios" wheel. The year would be the current year, just don't need to have it displayed or changed.

Thanks in advance.

1. Profil...@gmail.com: Currently you cannot mix date/time scrollers with custom scrollers. You can have as many stacked scrollers as you want with the "wheels" option, but if you create custom date/time scrollers, you will loose built in functionality like date validation (e.g. 02/31/2011 is not allowed) and date formatting.

2. sant...@gmail.com Trate de enviar el formulario en la "onSelect" caso de mobiscroll.

3. alexkem...@gmail.com Currently not possible, but it will be in a next release. See  Issue 20 .

Hi :)

cool library! :D Currently, I controlled formatResult as an event inorder to detect scroller changes. I have 2 scrollers, one for Min price and one for Max price. The problem is... is there an event in which I can change the value of Max "on the fly" in the scroller shown when the Min scroller is being formatted?

formatResult: function(d) {

// if(min > max)

// change value of max event

hope u get my question. If this is not yet available. It would be too much to ask to add an event handler on this? :) Thanks

Hi, very good job ;-) i love this widget but I have a big problem: I tried to set the endYear to a new value like this:

$('#neueUhrzeit').scroller({

endYear: currYear + 10

});

but it dosn´t work :-(

When I startet the application, no content was shown??? Without this value-setting it works very fine. Has anyone an idea what could be the Problem? I have no idea.

Thanks very much :-)

Chris

Chris, if no content is shown, it must be javascript error. How is your "currYear" variable set. It should be something like:

var currYear = (new Date()).getFullYear();

uuuups :-) I did not set any "currYear" variable... this could be the reason vor the bug :-) I thougth this variable is already exsisting in the plugIn. Great! it works :-) Thank you very much for the fast answer to my question. And please excuse my bad english grammar I'am german ;-) I further wish you much success for you project.

Greetings Chris

PS: Do you have other jQuery projects like this?

Is there any way to prevent the scroller from closing in case of a validation error after I click "Set"?

Thanks a lot for your brilliant plugin. I'd like to know if it's possible to have a scrolling behaviour based on user touch intensity such as on iphone/ipad datetime picker.

1. nor...@gmail.com: In 1.5.1 is now possible to prevent close returning false in the onClose event handler

2. luk...@gmail.com: We will try to implement some kind of momentum scrolling in the future...

You should document the configuration option 'shortYearCutoff'. Maybe change the default too. It is set to '+10'. So if you parse a date like '01.01.11' you'll receive 01.01.1911! '01.01.05' is parsed to '01.01.2011'. I'll set it to '+99' in my configuration.

Thank you for this great plugin!

regards Andreas

It should be documented that sometimes a 3rd parameter is needed (true in setDate). Took me awhile to figure that out.

Hi, is there any way to use this plugin without jquery mobile? I need it for Ipad as a replacement of the data picker from Jquery UI.

Yes, you can use it without jquery mobile.

Hi, I am trying to use mobiscroll in a form - where the same page get reloaded <form action='index.php' method='post' name='form' data-transition='fade'>

The problem I have is that the date picker only works the very first time ... Once the "Submit" button is clicked, then if you try to change the date, the mobiscroll popup will not come up.

I have read that "$(document).ready(function ()" could be the issue (only loaded for the first page, not the following one) ... I have changed it to "$('document').bind('pagecreate', function()" without any luck. Can someone help ? Thanks Gaëtan

Hi.... I noticed that you added the ability to prevent close in the onClose handler by returning false. Is there a way within the onClose handler to detect which close button was pressed? Set or Cancel?

I have 2 wheels, Min and Max and want to test if Min>Max and if so prevent close on Set, but not on Cancel.

Great plugin though. Cheers

PS.... Or (further to my previous post) a way to return false in the onSelect handler similar to onClose?

Looking for a way to decouple the mobiscroll widget from the pop up dialog. Meaning I just want the scroller to sit on the page which will update a text field as it is changed. Anyone have any ideas how to accomplish this? Thanks.

谁能tell me 如何设置日期的限制怎么做？thanks了

Has anyone gotten the formatResult to work ? When is it supposed to fire ?

Mouse-scroll won't work with jQuery version 1.7

Great job! same as ian.. I need the mobiscroll to sit in the page when it loads, and then update a date field when it changes. is there any solution for that? Thanks.

Hello everyone, How to show only year when you choose date and time? Thanks

Hi, I have customized my mobiscroll to 24hr mode using $('#vlA').scroller('option',{ampm: false}); which worked ok and shows 24hr but when the time is shown it returns in 12hr mode, how do I change this also?

Thanks

To display the time in 24 hour format i.e. 14:26 set the timeFormat option to this.

timeFormat: 'HH:ii'

Ah I did have $('#vlA').scroller('option',{timeFormat: 'hh:ii'}); as per the api above but that didnt work, now I have the hh in uppercase $('#vlA').scroller('option',{timeFormat: 'HH:ii'}); and it works!

Thanks

hello, first of all, thanks for this plugin I search how can we show on date picker a date format on the top like : Monday 21 November 2011 and have in input : 2011/11/21 thanks a lot

Hi there, first of all: Big thanks for this great project! This really makes thins a lot easier!

But I do have one question. I'd like to have a "month picker". So there only should be two wheels: month and year. If I set the dateOrder property to 'MMyy', a day-wheel gets rendered anyway. Is there any chance I can get mobiscroll to not show the day wheel but only show the month/year wheels?

Best regards Dominik (The-M-Project)

I discovered that if you navigate via <a> or <form> to a page with Mobiscroll and both pages (source/destination) are using jQuery Mobile AND both pages are on the same domain the scroller will not launch unless you reload the destination page.

My work around was to use the target="self" attribute on the form or link. I did this in hope that it would equate to a page reload. Perhaps it does.

Craig

Hi,

This is exactly what I was looking for, thank you!!!

When I use the setDate it places the correct dateTime in the field, but the scroller still pops up with the current dateTime. Am I missing something? Do I need to destroy and rebuild after I setDate or something else?

Thanks, K'shin

I'm having the same issue. I am issuing the setDate but the control still comes up with "now" as opposed to what I set the date/time to.

the mouse wheel scroll will not work in jquery 1.7.0/1 (chrome, ubuntu destop). This seems to be the culprit: event.layerX and event.layerY are broken and deprecated in WebKit?. They will be removed from the engine in the near future. When running in 1.6.4 this warning is given.

More details on the mousewheel http://bugs.jquery.com/ticket/10676

On line 900 of the unpacked version, changing e.wheelDelta to e.originalEvent.wheelDelta will make the mouse scroll work, on Chrome, Ubuntu desktop.

Hey guys this may seem lame....bt how do i use mobiscroll in my html.

@saura, go to the demo and view the page source to see the example html: http://demo.mobiscroll.com/

@abaw and to any others running into this issue.

The fix is in the dateFormat. The 4 digit year is represented by yy, not yyyy. yyyy breaks it. That's it!

Isn't there an easy way to use it like giving a link to a .js file or something.

Awesum job man... :D

To convert it to a "Month picker": search in the mobiscroll.js :

for (var k = 0; k < 3; k++)

and replace 3 for 2. Works ok 100%. The result give us days (the present day) but i think there is no problem in convert afterwards to the desired format.

I thing i have done something wrong or found a bug. This is my JS: $('#date1').scroller({ theme: "ios", mode: "scroller", startYear: currYear, endYear: currYear + 2, dateFormat : 'dd-mm-yy', dateOrder : 'ddmmyy', preset: 'datetime', ampm: false, timeFormat: 'hh:ii' });

This is my html: <input type="text" name="date1" id="date1" class="mobiscroll" value="28-05-2012 19:30" />

When i select a time like 16:50 it does not returns 16:50 but 04:50.

When the picker loads it selects the right time, so it has 19:30 selected.

I hope someone can help me out!

How do I use the scroller wheel in a decoupled mode?

When scrolling through the timepicker the scrolling wheel jumps/moves up and down (depending on if you are scrolling up or down)

Does anyone encountered the same problem? Any idea on how to solve it?

Thanks

That's happening on mobile devices by the way

hello, first, thank you for your work and your plugin. this is almost what i need... i would like to have 6 instances of it (1 datetime preset and 5 customs) in the same page, always visible and enabled... can you say me how can i do it please? thanks.

nevermind about my issue, upgraded to version 1.5.3 and problem solved

What's the correct way to credit MobiScroll? in my app?

Hi Guys,

I want to show the name of selected items in the input box while set the scrolling list?Now its showing the index of the selected items.Can anybody knows how to do that?

Thanks, Pramod

Hi to all,

Please join the mobiscroll group http://groups.google.com/group/mobiscroll for General Inquiries and Discussions.

Thanks for using mobiscroll!

Hi: Im designing a mobil Form using jqueryMobile, when i insert in a sencond page the mobiscroll code it doesn't work. Can you help me please? :)

Is it possible to use mobiscroll NOT in a popup mode? What I'm looking for is an option to embed it in a page together with other form controls. p.

Just a lit update to the documentation, when trying to set date from some other place, there is 3rd parameter that will update the source(text field that has date written) So this line in doc "setDate .scroller('setDate', date) If a preset is selected sets the scroller date/time from the date parameter passed as a Date object"

needs third parameter as on demo here http://demo.mobiscroll.com/

Is it possible that mobiscroll starts from current date to 45 days ahead. Means if today date is 03/07/2012 then mobiscroll opens with the current date to next 45 days. User can not choose a back date means 03/06/2012 or less. He can choose today date or any of next 45 days date only not more then 45 days.

@ juanjaco...@gmail.com:

I'm using jQuery Mobil too. My method looks like this:

$('#zeiten').live('pageshow', function (event) {

$("#urlaubBis").scroller({ preset: 'date', mode: 'clickpick', ampm: false, cancelText: 'Abbruch', dateFormat: 'dd.mm.yy', dateOrder: 'ddmmyy', dayText: 'Tag', monthText: 'Monat', yearText: 'Jahr', setText: 'Auswählen'});

});

And for each new page I'm doing the same thing. Works like a charm ;)

I have a question too. Is it just possible to show the calendar weeks? Like week this week is week number 10. From 5th to 11nd.

Thanks in advance,

Daniel

I have a custom 3 wheels scroller, the problem I have is that depending of what is selected on the 1st wheel I have to generate the options of the 2nd and 3rd wheel in real-time. Is this possible? is there a way to reset or update the scroller wheels when the selection changes?

Thanks!

Hi, I am trying to use mobiscroll in a index.php form - where the index.php get reloaded <form action='index.php' method='post'>

The problem I have is that the date picker only works the very first time ... Once the "Submit" button is clicked, then if you try to change the date, the mobiscroll popup will not come up.

Please Reply..Thanks!!

Hi, I'm using mobiscroll but I need to put the datepicker form inside a chocolatechip popover. How would you go about doing it?

Any help will be really appreciated.

Thanks! oh, and by the way, great job with this library.

Thank you for this script. It works really well in all my tested browsers, except for Chrome 18. In this version, the popup takes a lot of time to respond to clicks. Not sure if this is an issue with Mobiscroll or with JQuery 1.7.1

Also, does anyone has a full example of a Mobiscroll bound to a button instead of a text field? I would prefer to have a little button next to the text field to activate the popup, so the user has the option of freely type the date if desired. I see a partial example in the comments above, but I'm a little confused about the correct binding syntax.

Please direct your questions to https://groups.google.com/forum/#!forum/mobiscroll