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());

  • 相关阅读:
    图的广度优先搜索
    图的深度遍历
    图的邻接表的实现
    求1+2!+3!+...+20!的和。
    CSS用户界面样式
    CSS三角
    CSS字体图标技术
    CSS精灵技术
    CSS元素的显示和隐藏
    CSS定位
  • 原文地址:https://www.cnblogs.com/zlqblog/p/3566172.html
Copyright © 2011-2022 走看看