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">
                    &nbsp;</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">
                    &nbsp;</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());

 

posted @ 2014-02-25 10:33  码农小小强  阅读(399)  评论(0编辑  收藏  举报