Hassle-free 5 minute guide to awesome Date & Time picking
This is the first entry in our “Hassle-free” 5 minute guide series for making data-picking awesome in you app.
What?!?! Under 5 minutes? Keep on reading …
What you need
Under 5 minutes of time
A text editor and a browser
Wanting to make data selection awesome in your app



What you’ll be doing?
You will be making date & time picking easy in your mobile/tablet webapp or hybrid app (PhoneGap).
So let’s get started.
Download mobiscroll
Download the Date & Time Scroller
Add mobiscroll to your app
Oh wow. Just a few clicks and your almost done.
1 2 | <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script> |
1 2 | <!-- The HTML: Input for the date & time --> <input id="i" name="i" /> |
1 2 3 4 | //The Javascript: initializing the scroller $(function(){ $("#i").mobiscroll().datetime(); }); |
Enjoy the magic
NO way! Already?
Optional but RECOMMENDED
If this is not sharable, what is?
If this was awesome and made you smile, spread the word!
Resources
You’ll find all resources you need to build the example and a step by step guide in text, without images.
Step by Step Guide
- Go to http://download.mobiscroll.com/datetime and choose the library you’re using (We support jQuery, jQuery Mobile, Zepto JS and jQMobi)
- Choose the theme you like (There is a default theme added initially)
- Hit that download button
- Load the page you’d like to enhance with the Mobiscroll Date & Time Scroller in your favorite IDE or Text Editor
- Include the necessary CSS and JS files that came in your download package
- Add an input to your markup and link mobiscroll to it
- Open up your favorite browser or rather pick up your phone, we’re supporting all the major platforms (Android, iOS, Windows Phone 8 and BlackBerry) and navigate to the URL where you have your app
- Enjoy the glory!
- Share what you just learned