Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

190 lines (177 sloc) 7.142 kb
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<script src=""></script>
<script src="js/mobiscroll.zepto.js" type="text/javascript"></script>
<script src="js/mobiscroll.core.js" type="text/javascript"></script>
<script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
<script src="js/" type="text/javascript"></script>
<script src="js/mobiscroll.ios.js" type="text/javascript"></script>
<script src="js/" type="text/javascript"></script>
<script src="js/" type="text/javascript"></script>
<link href="css/mobiscroll.core.css" rel="stylesheet" type="text/css" />
<link href="css/" rel="stylesheet" type="text/css" />
<link href="css/" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.ios.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.sense-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
font-size: 12px;
padding: 0;
margin: 0;
background: #F3F3F3;
.text-input {
width: 100%;
padding: 5px;
margin: 5px 0;
border: 1px solid #aaa;
box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
.header {
border: 1px solid #333;
background: #111;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
background-image: -webkit-linear-gradient(#3C3C3C,#111);
background-image: -moz-linear-gradient(#3C3C3C,#111);
background-image: -ms-linear-gradient(#3C3C3C,#111);
background-image: -o-linear-gradient(#3C3C3C,#111);
background-image: linear-gradient(#3C3C3C,#111);
.header h1 {
text-align: center;
font-size: 16px;
margin: .6em 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.content {
padding: 15px;
background: #fff;
.fieldcontain {
padding-right: 12px;
.inline > div {
text-align: center;
#buttons {
text-align: left;
#buttons input {
margin: 0;
<script type="text/javascript">
$(function () {
var curr = new Date().getFullYear();
var opt = {
'date': {
preset: 'date',
dateOrder: 'mmddyy',
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }
'datetime': {
preset: 'datetime',
minDate: new Date(2012, 3, 10, 9, 22),
maxDate: new Date(2014, 7, 30, 15, 44),
stepMinute: 5
'time': {
preset: 'time'
'credit': {
preset: 'date',
dateOrder: 'mmyy',
dateFormat: 'mm/yy',
startYear: curr,
endYear: curr + 10,
width: 100
'btn': {
preset: 'date',
showOnFocus: false
'inline': {
preset: 'date',
display: 'inline'
$('select').scroller({ preset: 'select', inputClass: 'text-input' }).on('change', function() {
$('#test').val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val() }));
$('#demo').val() == 'btn' ? $('#buttons').show() : $('#buttons').hide();
$('#trigger').click(function() {
return false;
$('#clear').click(function() {
return false;
<div class="page">
<div class="header">
<div class="content">
<form id="testform">
<div class="fieldcontain">
<label for="theme">Theme</label>
<select name="theme" id="theme">
<option value="default">Default</option>
<option value="android-ics">Android ICS</option>
<option value="android-ics light">Android ICS Light</option>
<option value="android">Android</option>
<option value="sense-ui">Sense UI</option>
<option value="ios">iOS</option>
<div class="fieldcontain">
<label for="mode">Mode</label>
<select name="mode" id="mode">
<option value="scroller">Scroller</option>
<option value="clickpick">Clickpick</option>
<option value="mixed">Mixed</option>
<div class="fieldcontain">
<label for="demo">Demo</label>
<select name="demo" id="demo">
<option value="date" selected>Date</option>
<option value="datetime">Datetime</option>
<option value="time">Time</option>
<option value="credit">Credit card expiration</option>
<option value="btn">Show/Clear buttons</option>
<option value="inline">Inline</option>
<div class="fieldcontain inline">
<label for="test">Click here to try</label>
<input type="text" name="test" id="test" class="text-input" />
<div id="buttons">
<input type="submit" value="Choose Date" id="trigger" />
<input type="submit" value="Clear" id="clear" />
Jump to Line
Something went wrong with that request. Please try again.