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
349 lines (256 loc) • 7.14 kB
HTML
<html>
<head>
<title>Parse Input and Format Ouput - 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 oArrData = [];
function createDataSource()
{
var oArrDataNum = [365, 23, 59],
iTempIndex1, iTempIndex2;
for(iTempIndex1 = 0; iTempIndex1 < oArrDataNum.length; iTempIndex1++)
{
var iNum = oArrDataNum[iTempIndex1],
oArrDataComp = [];
for(iTempIndex2 = 0; iTempIndex2 < (iNum + 1); iTempIndex2++)
{
oArrDataComp.push({
val: iTempIndex2.toString(),
label: iTempIndex2.toString()
});
}
oArrData.push(oArrDataComp);
}
}
function execRegex(sRegex, sString)
{
var sArrOut = [];
while((sArrString = sRegex.exec(sString)) !== null)
{
for(var iTempIndex = 0; iTempIndex < sArrString.length; iTempIndex++)
{
var sStr = sArrString[iTempIndex];
if(sStr !== undefined && sStr !== "" && sStr.search(/\s/g) === -1)
sArrOut.push(sArrString[iTempIndex]);
}
if(sArrString.index === sRegex.lastIndex)
{
sRegex.lastIndex++;
}
}
return sArrOut;
}
createDataSource();
var oArrComponents = [
{
component: 0,
name: "day",
label: "Days",
width: "50%",
textAlign: "center"
},
{
component: 1,
name: "hours",
label: "Hours",
width: "20%",
textAlign: "center"
},
{
component: 2,
name: "minutes",
label: "Minutes",
width: "30%",
textAlign: "center"
}
],
oArrDataSource = [
{
component: 0,
data: oArrData[0]
},
{
component: 1,
data: oArrData[1]
},
{
component: 2,
data: oArrData[2]
}
];
function cfParseInput(sElemValue)
{
var apo = this;
var oArrInput = [];
if(sElemValue !== undefined && sElemValue !== null && sElemValue !== "")
{
var sRegex = /(\d{1,3})\s(\bday\b|\bdays\b)+|\s+|([0-2]{0,1}[0-9]{1})\s(\bhour\b|\bhours\b)+|\s+|([0-5]{0,1}[0-9]{1})\s(\bminute\b|\bminutes\b)+|/g,
sArrValue = execRegex(sRegex, sElemValue),
oValues = {
days: "0",
hours: "0",
minutes: "0"
};
console.log("parseInput : " + sElemValue);
console.log(sArrValue);
for(var iTempIndex = 0; iTempIndex < sArrValue.length; (iTempIndex = iTempIndex + 2))
{
var sLabel = sArrValue[iTempIndex + 1],
sVal = sArrValue[iTempIndex];
if(sLabel !== undefined)
{
console.log(sLabel + " " + sVal);
if(sLabel === "day" || sLabel === "days")
oValues.days = sVal;
else if(sLabel === "hour" || sLabel === "hours")
oValues.hours = sVal;
else if(sLabel === "minute" || sLabel === "minutes")
oValues.minutes = sVal;
}
}
oArrInput = [oValues.days, oValues.hours, oValues.minutes];
}
else
oArrInput = ["0", "0", "0"];
return oArrInput;
}
function cfFormatOutput(oSelectedValues)
{
var apo = this,
sArrOutput = [],
sTempStr = "", iTempIndex;
for(iTempIndex = 0; iTempIndex < apo.tmp.numOfComp; iTempIndex++)
{
sArrOutput.push(oSelectedValues.values[iTempIndex].label.toString());
}
if(sArrOutput[0] !== "0")
{
if(sArrOutput[0] === "1")
sTempStr += sArrOutput[0] + " day ";
else
sTempStr += sArrOutput[0] + " days ";
}
if(sArrOutput[1] !== "0")
{
if(sArrOutput[1] === "1")
sTempStr += sArrOutput[1] + " hour ";
else
sTempStr += sArrOutput[1] + " hours ";
}
if(sArrOutput[2] !== "0")
{
if(sArrOutput[2] === "1")
sTempStr += sArrOutput[2] + " minute ";
else
sTempStr += sArrOutput[2] + " minutes ";
}
return sTempStr;
}
$(document).ready(function()
{
$("#ip-de").AnyPicker(
{
mode: "select",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
parseInput: cfParseInput,
formatOutput: cfFormatOutput
});
$("#ip-ios").AnyPicker(
{
mode: "select",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
parseInput: cfParseInput,
formatOutput: cfFormatOutput,
theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
$("#ip-android").AnyPicker(
{
mode: "select",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
parseInput: cfParseInput,
formatOutput: cfFormatOutput,
theme: "Android" // "Default", "iOS", "Android", "Windows"
});
$("#ip-wp").AnyPicker(
{
mode: "select",
showComponentLabel: true,
components: oArrComponents,
dataSource: oArrDataSource,
parseInput: cfParseInput,
formatOutput: cfFormatOutput,
theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Duration : (Default)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-de" value="10 days 15 minutes" readonly />
</td>
</tr>
<tr>
<td>Duration : (iOS)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-ios" value="10 days 15 minutes" readonly />
</td>
</tr>
<tr>
<td>Duration : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" value="10 days 15 minutes" readonly />
</td>
</tr>
<tr>
<td>Duration : (Windows)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-wp" value="10 days 15 minutes" readonly />
</td>
</tr>
</table>
</body>
</html>