zoukankan      html  css  js  c++  java
  • 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());

  • 相关阅读:
    网络设备
    Linux常用操作
    工作常用笔记
    性能测试问题总结
    mysql性能分析
    Java8新特性学习笔记-CompletableFuture
    Java语言定义的线程状态分析
    Gatling-插件开发
    RabbitMQ记录
    Go常用库
  • 原文地址:https://www.cnblogs.com/zlqblog/p/3566172.html
Copyright © 2011-2022 走看看