My97DatePicker使用、layDate 日期與時間組件

時間 2020-07-05

標籤 my97datepicker datepicker 使用 laydate 日期時間組件简体版

原文原文鏈接

1、My97DatePicker

官方：http://www.my97.net/

<head>
    <meta charset="UTF-8">
    <title>Bootstrap介紹</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
  
</head>
<body>
 
 <table>
 
                                    <tr>

                                        <td>
                                             <span title="">  時間範圍start：</span>  
                                        </td>
                                        <td>
                                             <input name="startTime" type="text" id="startTime" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd',readOnly:true})" />
                                          
                                        </td>

                                          <td  >   <span title=""> 時間範圍end：</span> 
                                         </td>
                                        <td>
                                            <input name="endTime" type="text" id="endTime" class="form-control"  onfocus="WdatePicker({dateFmt:'yyyy/MM/dd',readOnly:true})"  />
                                        </td>
                                   
                                         <td   >
                                            <input type="submit" name="BtnSelect" value="查詢" id="BtnSelect" class=" btn-success" />
                                        </td>
                                          
                                    </tr>

 </table>

2、layDate 日期與時間組件

官方：http://www.layui.com/laydate/

1.引入： <script src="/Scripts/laydate/laydate.js"></script>javascript

2.使用：css

<script type="text/javascript">
lay('#version').html('-v' + laydate.v);
//日期時間選擇器
laydate.render({
elem: '#txtstart'
, type: 'datetime'
});

laydate.render({
elem: '#txtend'
, type: 'datetime'
});

</script>