asp.net中的日历弹出控件 [英] Calender pop-up Control in asp.net
本文介绍了asp.net中的日历弹出控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用html使用日历弹出控件。
它是当我添加一个文本框时工作正常。
如果我添加多个texbox，日历只会在一个文本框中播放。
以下是我的代码
Hi,
I have used calender pop-up control using html.
It is working fine when I added one textbox.
If I add multiple texbox, calender is pup-up only for one text box.
Below is my code
<head>
<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"
});
};
</script>
</head>
<body>
Look at the comments on the HTML source to fully understand how this very simple example works.
<input type="text" size="12" id="inputField" />
</body>
</html>
请帮助
Please help
推荐答案
没有完整的代码，但基于可用的代码和你的问题，我可以给你回答。
我觉得你忘了改变第二个脚本的目标（JsDatePick），如果你复制&粘贴代码&忘了做更改
No full code, but based on available code & your question, I could give you answer.
I think you forgot to change the target for second script(JsDatePick), it'll happen if you copy & paste code & forgot to do changes
<input type="text" size="12" id="inputField" />
<input type="text" size="12" id="<b>inputField2</b>" /><!--Here second element id is inputField2-->
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",/*Here you have to change the element id*/
dateFormat:"%d-%M-%Y"
});
};
</script>
编辑
------------------------
jsDatePick家伙可以帮助你快速。无论如何我的样本想法（不确定它会点击），修改自己。
为dropdownlist onchange创建一个js函数。试试吧。
EDIT
------------------------
jsDatePick guys could help you quickly. Anyway here my sample idea(not sure it'll click), modify yourself.
Create a js function for dropdownlist onchange. Try it.
<asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true"
onchange="return EnableDisableDatePickers();" OnSelectedIndexChanged="some_event" >
</asp:DropDownList>
function EnableDisableDatePickers() {
/*Sample code*/
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
}
你好，
从文档中可以看出要绑定到您将需要多个文本框来创建JsDatePick的多个实例。因此，如果您有4个名为sat txt1，txt2，txt3和txt4的文本框，那么将日历附加到这些文本框的代码将类似于下面所示的代码。
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"
});
};
这是一个直接从jsDatePick库中获取的示例页面。
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>
<!--
Copyright 2009 Itamar Arjuan
jsDatePick is distributed under the terms of the GNU General Public License.
****************************************************************************************
Copy paste these 2 lines of code to every page you want the calendar to be available at
-->
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<!--
OR if you want to use the calendar in a right-to-left website
just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"!
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />
-->
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<!--
After you copied those 2 lines of code , make sure you take also the files into the same folder :-)
Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element.
The first example of Javascript snippet is for the most basic use , as a popup calendar
for a text field input.
-->
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
/*selectedDate:{ This is an example of what the full configuration offers.
day:5, For full documentation about these settings please see the full version of the code.
month:9,
year:2006
},
yearsRange:[1978,2020],
limitToToday:false,
cellColorScheme:"beige",
dateFormat:"%m-%d-%Y",
imgPath:"img/",
weekStartDay:1*/
});
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,
< script type =text / javascriptsrc =../ js / ui.datepicker.js>< / script>
<script type="text/javascript" src="../js/ui.datepicker.js"></script>
这篇关于asp.net中的日历弹出控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
