anypicker
Version:
AnyPicker is a customizable jQuery Picker Library for Mobile OS. Create custom mobile pickers (Date, Time, Rating etc) for iOS, Android & Windows. Use pre-built pickers like Date Picker, Time Picker, Date Time Picker, etc
365 lines (223 loc) • 6.48 kB
HTML
<html>
<head>
<title>Rows Navigation - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
body
{
margin: 0px;
}
.input-cont
{
width: 300px;
padding: 20px;
}
input
{
width: 200px;
height: 30px;
padding: 3px 10px;
margin-bottom: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
<script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../src/anypicker.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// ------------------------- Default -------------------------
$("#ip-de-ap1").AnyPicker(
{
mode: "datetime",
rowsNavigation: "scroller",
dateTimeFormat: "MMM dd,yyyy"
});
$("#ip-de-ap2").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "buttons"
});
$("#ip-de-ap3").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "scroller+buttons"
});
// ------------------------- iOS -------------------------
$("#ip-ios-ap1").AnyPicker(
{
mode: "datetime",
rowsNavigation: "scroller",
dateTimeFormat: "MMMM d,yyyy",
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
$("#ip-ios-ap2").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMMM d,yyyy",
rowsNavigation: "buttons",
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
$("#ip-ios-ap3").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMMM d,yyyy",
rowsNavigation: "scroller+buttons",
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
// ------------------------- ANDROID -------------------------
$("#ip-android-ap1").AnyPicker(
{
mode: "datetime",
rowsNavigation: "scroller",
dateTimeFormat: "MMM dd,yyyy",
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
$("#ip-android-ap2").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "buttons",
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
$("#ip-android-ap3").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "scroller+buttons",
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
// ----------------------- WINDOWS PHONE ----------------------
$("#ip-wp-ap1").AnyPicker(
{
mode: "datetime",
rowsNavigation: "scroller",
dateTimeFormat: "MMM dd,yyyy",
theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
$("#ip-wp-ap2").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "buttons",
theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
$("#ip-wp-ap3").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd,yyyy",
rowsNavigation: "scroller+buttons",
theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Date : (Scroller, Default) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-de-ap1" readonly>
</td>
</tr>
<tr>
<td>Date : (Buttons, Default) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-de-ap2" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller+Buttons, Default) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-de-ap3" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller, iOS) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios-ap1" readonly>
</td>
</tr>
<tr>
<td>Date : (Buttons, iOS) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios-ap2" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller+Buttons, iOS) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios-ap3" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller, Android) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-android-ap1" readonly>
</td>
</tr>
<tr>
<td>Date : (Buttons, Android) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-android-ap2" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller+Buttons, Android) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-android-ap3" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller, Windows) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp-ap1" readonly>
</td>
</tr>
<tr>
<td>Date : (Buttons, Windows) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp-ap2" readonly>
</td>
</tr>
<tr>
<td>Date : (Scroller+Buttons, Windows) </td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp-ap3" readonly>
</td>
</tr>
</table>
</body>
</html>