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
149 lines (104 loc) • 3.15 kB
HTML
<html>
<head>
<title>Start Date and End Date - 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">
var oAP1, oAP2;
var dStartD, dEndD, sStartD, sEndD;
dStartD = new Date(2015, 9, 20, 0, 0, 0, 0);
dEndD = new Date(dStartD.getTime() + (5 * $.AnyPicker.extra.iMS.d));
$(document).ready(function()
{
$("#ip-start-date").AnyPicker(
{
mode: "datetime",
inputDateTimeFormat: "dd/MM/yyyy",
dateTimeFormat: "MMM dd,yyyy",
maxRows: 200,
onInit: function()
{
oAP1 = this;
sEndD = oAP1.formatOutputDates(dEndD, "dd/MM/yyyy");
oAP1.setMaximumDate(sEndD);
oAP1.setSelectedDate(dStartD);
console.log("maxValue : " + sEndD + " " + oAP1.tmp.selectedDate);
},
onSetOutput: function(sOutput, oSelectedValues)
{
sStartD = sOutput;
oAP2.setMinimumDate(sStartD);
oAP2.setSelectedDate(dStartD);
console.log("minValue : " + oAP2.setting.minValue + " " + oAP1.tmp.selectedDate);
}
});
$("#ip-end-date").AnyPicker(
{
mode: "datetime",
inputDateTimeFormat: "dd/MM/yyyy",
dateTimeFormat: "MMM dd,yyyy",
onInit: function()
{
oAP2 = this;
sStartD = oAP2.formatOutputDates(dStartD);
oAP2.setMinimumDate(sStartD);
oAP2.setSelectedDate(dEndD);
console.log("minValue : " + sStartD);
},
onSetOutput: function(sOutput, oSelectedValues)
{
sEndD = sOutput;
oAP1.setMaximumDate(sEndD);
console.log("maxValue : " + oAP1.setting.maxValue);
}
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Start Date : </td>
</tr>
<tr>
<td>
<input type="text" id="ip-start-date" readonly>
</td>
</tr>
<tr>
<td>End Date : </td>
</tr>
<tr>
<td>
<input type="text" id="ip-end-date" readonly>
</td>
</tr>
</table>
</body>
</html>