Skip to content

Instantly share code, notes, and snippets.

@okuniw

okuniw/mobiscrollDatePicker.html

Last active August 29, 2015 14:16
Show Gist options
  • Save okuniw/4633233c101a8d3110f5 to your computer and use it in GitHub Desktop.
Save okuniw/4633233c101a8d3110f5 to your computer and use it in GitHub Desktop.
Download ZIP
Minimum settings (?) to use mobiscroll's date picker
Raw
mobiscrollDatePicker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- jQuery Include -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/mobiscroll.core.js"></script> <!-- core -->
<script src="js/mobiscroll.frame.js"></script> <!-- missing this will cause error -->
<script src="js/mobiscroll.scroller.js"></script> <!-- missing this will cause error -->
<script src="js/mobiscroll.frame.ios.js"></script>
<script src="js/mobiscroll.util.datetime.js"></script> <!-- missing this will cause error -->
<script src="js/mobiscroll.datetimebase.js"></script> <!-- generate date item -->
<script src="js/mobiscroll.datetime.js"></script> <!-- missing this will cause error -->
<link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" /> <!-- move scroller to specified position -->
<link href="css/mobiscroll.frame.ios.css" rel="stylesheet" type="text/css" /> <!-- background color ? -->
<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" /> <!-- missing scroll will not move & display abnormal -->
<link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" /> <!-- ios imitation tweak -->
<script>
$(function () {
// Date demo initialization
$('#demo_date').mobiscroll().date({
theme: 'ios', // Specify theme like: theme: 'ios' or omit setting to use default
dateFormat: 'yy-mm-dd',
mode: 'scroller', // Specify scroller mode like: mode: 'mixed' or omit setting to use default
display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
lang: 'en-US' // Specify language like: lang: 'pl' or omit setting to use default
});
});
</script>
</head>
<body>
<label for="demo_date">Try Date</label>
<input type="text" id="demo_date" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment