日期外掛(jedate)
阿新 • • 發佈:2019-01-22
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程式碼
} .input:hover { border: 1px #33ccff solid; }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;
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);
});
效果展示: