js日期插件

時間 2019-11-13

原文原文鏈接

推薦一款賢心寫的js日期插件，調用很是方便；順手寫了一個demo。javascript

先列舉下這款插件的優勢：日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的先後若干天返回、時分秒選擇、智能響應、自動糾錯、節日識別、快捷鍵操做、更換皮膚等。css

固然還有很重要的一點是使用簡單；
html

代碼以下：java

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>data_demo</title>
<!-- 引入laydate插件開始 -->
<script type="text/javascript" src="http://www.baijunyao.com/Demo/date_demo/laydate-v1.1/laydate.js"></script>
<!-- 引入laydate插件結束 -->
</head>
<body>
<!-- 基礎日期調用開始 -->
基礎調用開始：<input onclick="laydate()">
<!-- 基礎日期調用結束 -->
<br><br>
<!-- 帶時間時分秒調用開始 -->
帶時間時分秒調用：<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
<!-- 帶時間時分秒調用結束 -->
<br><br>
<!-- 帶時間、帶圖標調用開始 -->
帶時間、帶圖標調用：<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
<!-- 帶時間、帶圖標調用結束 -->
<br><br>
<!-- 外部js簡單調用開始 -->
外部js簡單調用：<input id="hello">
<script type="text/javascript">
laydate({
    elem: '#hello', //需顯示日期的元素選擇器
    event: 'focus' //響應事件。若是沒有傳入event，則按照默認的click
});
</script>
<!-- 外部js簡單調用結束 -->
<br><br>
<!-- 外部js設置具體參數調用開始 -->
外部js設置具體參數調用：<input id="test">
<script type="text/javascript">
/*方法屬性開始*/
    laydate.skin('molv'); // 設置皮膚 官方默承認以調用的皮膚有'default'、'dahong'、'molv' 此版本已集成了'default'、'dahong'、'molv'、'danlan'、'yalan'、'qianhuang'、'yahui'、'huanglv'
    var tody=laydate.now('-2'); // laydate.now(timestamp, format); timestamp能夠是先後若干天，也能夠是一個時間戳。format爲日期格式，爲空時則採用默認的「-」分割。如laydate.now(-2)將返回前天，laydate.now(3999634079890)將返回2096-09-28
/*方法屬性結束*/
/*參數設置開始*/
    laydate({
        elem: '#test', //需顯示日期的元素選擇器
        event: 'mouseover', //觸發事件 能夠調用的事件'click'、'focus'、'mouseover'、'mouseout'等
        format: 'YYYY/MM/DD hh:mm:ss', //日期格式
        istime: false, //是否開啓時間選擇
        isclear: true, //是否顯示清空
        istoday: true, //是否顯示今天
        issure: true, //是否顯示確認
        festival: true, //是否顯示節日
        min: '2015-03-01 00:00:00', //最小日期
        max: '2015-04-01 23:59:59', //最大日期
        start: laydate.now(),    //開始日期 例如：'2015-04-01 23:59:59' 此處是先用laydate.now('-1')得到了昨天的時間
        fixed: false, //是否固定在可視區域
        zIndex: 99999999, //css z-index
        choose: function(dates){ //選擇好日期後的回調
            alert(tody);
        }
    })
/*參數設置結束*/
</script>

<!-- 外部js設置具體參數調用結束 -->
</body>
</html>

demo下載連接：http://pan.baidu.com/s/1qW6zHoC
ui

到此結束，能夠無視下面這樣用來作文章封面的圖片；插件