Hello,
From the documentation it appears that to bind to multiple text boxes you will have to create multiple instances of JsDatePick. So if you have 4 text boxes named sat txt1, txt2, txt3 and txt4, then your code to attach the calendar to these text boxes will be something similar to one shown below.
window.onload = function(){
new JsDatePick({
useMode:2,
target:"txt1",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"txt3",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"txt3",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"txt4",
dateFormat:"%d-%M-%Y"
});
};
Here is a sample page taken directly from the jsDatePick library.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsDatePick Javascript example</title>
<!--
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<!--
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<!--
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField3",
dateFormat:"%d-%M-%Y"
});
};
function doChange(ctrl) {
var val = ctrl.options[ctrl.selectedIndex].value;
if ("NONE" === val) {
document.getElementById('inputField').disabled = false;
document.getElementById('inputField2').disabled = false;
document.getElementById('inputField3').disabled = false;
} else if ("FIRST" === val) {
document.getElementById('inputField').disabled = true;
document.getElementById('inputField2').disabled = false;
document.getElementById('inputField3').disabled = false;
} else if ("SECOND" === val) {
document.getElementById('inputField').disabled = false;
document.getElementById('inputField2').disabled = true;
document.getElementById('inputField3').disabled = false;
} else {
document.getElementById('inputField').disabled = false;
document.getElementById('inputField2').disabled = false;
document.getElementById('inputField3').disabled = true;
}
}
</script>
</head>
<body>
<h2>JsDatePick's Javascript Calendar usage example</h2>
Look at the comments on the HTML source to fully understand how this very simple example works.
<select id="cboOne" onchange="doChange(this);">
<option value="NONE">Disable None</option>
<option value="FIRST">Disable First</option>
<option value="SECOND">Disable Second</option>
<option value="THIRD">Disable Third</option>
</select>
<input type="text" size="12" id="inputField" />
<input type="text" size="12" id="inputField2" />
<input type="text" size="12" id="inputField3" />
</body>
</html>
Regards,