MyDatePicker拆分日期显示到不同TextBox
如图所示效果:年—月—日 时—分—秒
<tr>
<td align="center" style="background-color: #cccccc">
出机时间:</td>
<td style="padding-left: 5px; background-color: #ffffff" class="style2">
<asp:TextBox ID="txtChuDate" runat="server" Width="34%" onclick="WdatePicker({el:'txtDate',dateFmt:'yyyy-MM-dd HH:mm',onpicked:PickedFunc})"></asp:TextBox>
<asp:TextBox ID="txtChuHour" runat="server" Width="12%"></asp:TextBox>:
<asp:TextBox ID="txtChuMin" runat="server" Width="12%"></asp:TextBox>
<asp:TextBox ID="txtDate" runat="server" Width="10%" style=" display:none"></asp:TextBox>
<img align="absmiddle" height="22" onclick="WdatePicker({el:'txtDate',dateFmt:'yyyy-MM-dd HH:mm',onpicked:PickedFunc})" src="../My97DatePicker/skin/datePicker.gif" width="16" /></td>
<td style="padding-left: 5px; height: 25px; background-color: #ffffff">
</td>
</tr>
<tr>
<td align="center" style="height: 25px; background-color: #cccccc">
回机时间:</td>
<td style="padding-left: 5px; background-color: #ffffff" class="style2">
<asp:TextBox ID="txtHuiDate" runat="server" Width="34%" onclick="WdatePicker({el:'txtDate',dateFmt:'yyyy-MM-dd HH:mm',onpicked:PickedFunc2})"></asp:TextBox>
<asp:TextBox ID="txtHuiHour" runat="server" Width="12%"></asp:TextBox>:
<asp:TextBox ID="txtHuiMin" runat="server" Width="12%"></asp:TextBox>
<asp:TextBox ID="txtDate2" runat="server" Width="10%" style=" display:none"></asp:TextBox>
<img align="absmiddle" height="22" onclick="WdatePicker({el:'txtDate',dateFmt:'yyyy-MM-dd HH:mm',onpicked:PickedFunc2})"src="../My97DatePicker/skin/datePicker.gif" width="16" /></td>
<td style="padding-left: 5px; height: 25px; background-color: #ffffff">
</td>
</tr>
javascript操作Onpicked:PickedFunc代码
<script type="text/javascript">
function PickedFunc(){
$dp.$('txtChuDate').value=$dp.cal.getP('y')+"-"+$dp.cal.getP('M')+"-"+$dp.cal.getP('d');
$dp.$('txtChuHour').value=$dp.cal.getP('H');
$dp.$('txtChuMin').value=$dp.cal.getP('m');
}
function PickedFunc2(){
$dp.$('txtHuiDate').value=$dp.cal.getP('y')+"-"+$dp.cal.getP('M')+"-"+$dp.cal.getP('d');
$dp.$('txtHuiHour').value=$dp.cal.getP('H');
$dp.$('txtHuiMin').value=$dp.cal.getP('m');
}
</script>
注意:el:'txtDate'中,如果你不需要'txtDate'这个框,你可以把他隐藏,但是el属性必须指定
$dp.$和$dp.cal.getP都是内置函数
<asp:TextBox ID="txtDate" runat="server" Width="10%" style=" display:none"></asp:TextBox>
将这个TextBox的style display属性设置为隐藏就可得到每个数据。
两个输入框联动:
第一个日期选中后自动填充到第二个日期框中
在等一个输入框的点击事件function PickedFunc() 中加入如下代码将第一个输入框中选择的val()赋值给第二个框的所有
{if ($("input[id$='txtHuiDate']").val() == "") {
$("input[id$='txtHuiDate']").val($("input[id$='txtChuDate']").val());
$("input[id$='txtHuiHour']").val($("input[id$='txtChuHour']").val());
$("input[id$='txtHuiMin']").val($("input[id$='txtChuMin']").val());