Date Scroller Control

edited April 2012 in Enyo 2
I've created a DateScroller control for Enyo 2 that I thought I'd share. This works the way the Sencha & iOS date pickers work. Scroll through the columns or tap any visible items to scroll to that date.

View DateScroller Demo


How to use:
1) Include the lib in your app, along with enyo & fittables

2) Instantiate your DateScroller kind:
	kind: "germboy.DateScroller", 
	monthValue: 1, 
	dayValue: 31, 
	yearValue: 2012, 
	minYear: 2011,
	rangeYears: 10, 
	visibleRows: 5,
	onDateSelected: "dateSelected"

monthValue - Integer: Specifies the initially selected month. (1 = January)
dayValue - Integer: Specifies the initially selected day.
yearValue - Integer: Specifies the initially selected year.
minYear - Integer: Specifies the minimum year the DateScroller will show.
rangeYears - Integer: Specifies the number of years the DateScroller will make available.
visibleRows - Integer: Specifies the amount of rows that will be visible to the user. Must be an odd number! If value is an even number, value will be decreased by 1. Defaults to 3.

.getDate( ) - Returns an object of the currently selected date.
.setMonth( index ) - Scrolls the DateScroller's month column to the index passed. (Ex: 1 = February)
.setDay( index ) - Scrolls the DateScroller's day column to the index passed.
.setYear( index ) - Scrolls the DateScroller's year column to the index passed.

onDateSelected: "" - Returns an object containing the currently selected date.


  • Look very nice :-)

    Is there a method to alter the layout so that us non-americans can use it in our format (example: Day/Month/Year) ?
  • Good call. I've just updated my control to add a dateFormat property.

    Additional Property:
    dateFormat - Array: Specifies the order of your columns (m/d/y). If used, array must contain 3 objects containing value properties of "m", "d", or "y". For layout control, you can also specify a fit property on the column you want to fill the remainder of the DateScroller container. Ex: dateFormat:[{value: "d"},{value: "m", fit: true},{value: "y"}]
  • Hmm. If it were me, I'd probably disable the scroll bars on the day/month side. We hopefully all already know the bounds for those two :)

    Also, although I love the snap scrolling on it, it feels weird to not be able to flick and have it momentum scroll through the list.

  • I may take out the scroller thumbs in an update.

    And yeah ... I definitely tightened up the snap-scrolling to make it feel more incremental. I might have tightened it up a bit too much. If you look at source/DateScroller.js (line 22), in the "germboy.DateScrollerColumn" kind, you can see that I set the kFrictionDamping property to 0.8. That's down from the default 0.97 (found in enyo/source/touch/ScrollMath.js). I could probably change it to somewhere in-between. But until then, that's what you'd need to change to adjust the scroll mechanics to your liking.
  • I download them from github,then I can't render this on the webpage ,and the error:"index.html:33Uncaught TypeError: Object # has no method 'write'".Please help me how to run it normal,thanks a lot!!!
  • That error probably means you aren't loading the Enyo and Onyx library and your own source code properly, because you're not running the code that defines your own kind.
  • I already load the Enyo and Onyx and my source code by in index.html,if I write "hello world" simply,"new HelloWorld().write();", this sentence works normal.But copy this DateScroller from github is not work,why is it? pls hele me ,tks a lot!
  • How are you loading the DateScroller code into your page? Are you mentioning it in your package.js file? Are you explicilty pulling it in with a script tag?
  • edited April 2012
    this is my index.html's script tag ,base enyo and onyx path.Then error that run "new App().write();".
  • edited April 2012
    OK, that seems reasonable, but you didn't answer the question of from where you were loading the DateScroller code.
  • edited April 2012
    I load the DateScroller code by chrome,"C:\Users\Bruce\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files"
  • edited April 2012
    OK, I just realized that you were using the example in the GitHub repo, not rolling your own code.

    Make sure that the scripts are really loading. I just tried this in both Chrome and Firefox and it worked, but I had to adjust all the paths in the index.html file for loading the various libraries since I'd cloned the repo into my lib folder parallel to onyx and layout.
  • edited April 2012
    I try again adjust the scrits that are loading ,but can't work again ,I try run the onyx's examples, the same error,the screenshot like this:
  • edited April 2012
    Since you're using the Chrome debugger, try stepping into the new App call and see what's not working. The only reason that the write method wouldn't be found is if the constructor code wasn't working and you're getting back an object not based on enyo.Control.

    Also try switching to the network tab and make sure all the scripts are loading -- that will show script tags that weren't able to load.
Sign In or Register to comment.