1. 程式人生 > >日期外掛(jedate)

日期外掛(jedate)

jedate API 網址:http://www.jayui.com/jedate/index.html

jeDate可以直接顯示與點選顯示、日期標註點、設定年月(YYYY-MM)、日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前後若干天返回、時分秒選擇、智慧響應、自動糾錯、節日識別,操作....

引用檔案

<script src="jquery-1.11.1.min.js"></script>
<script src="jedate.js"></script>
<link rel="stylesheet" href="jedate.css"/>

html程式碼

 <table>
       <tr>
           <td> <label class="label">工作時間</label> </td>
           <td>
               <input type="text" class="input" id="instart" placeholder="請選擇" readonly>
           </td>
           <td><span class="label">至</span></td>
           <td>
               <input type="text" class="input" id="inend" placeholder="請選擇" readonly>
           </td>
       </tr>
   </table>

css程式碼

        table{
            width:450px;
            height:60px;
            margin-top:50px;
            margin-left: 50px;
        }
       table tr {
            width:inherit;
        }
        .label{
            font-size: 14px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            color: #333333;
        }
        .input {
            width:120px;
            height: 28px;
            border: 1px  #f2f3f2 solid;
<pre name="code" class="html">            background-image: url("icon_date.png");
            background-repeat: no-repeat;
            background-position: right center;
  } .input:hover { border: 1px #33ccff solid; }

js程式碼

 $(document).ready(function(){
            var start={
                dateCell: '#instart',
                format: 'YYYY/MM', // 分隔符可以任意定義
                isinitVal:false,   //是否初始化時間,預設不初始化時間
                isTime:false      //是否開啟時間選擇
            };

            var end = {
                dateCell: '#inend',
                format: 'YYYY-MM',
                isinitVal:false,   //是否初始化時間,預設不初始化時間
                isTime:false        //是否開啟時間選擇
            };

            jeDate(start);
            jeDate(end);

        });

效果展示: