js 時間控件 日期多選


在開發的過程中,時間總是不可避免要出現的需求,這里給大家分享我比較常用的js 時間控件和一個問題的解決方法

layDate

官方文檔地址:https://www.layui.com/laydate/

圖片:

 案例代碼:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 獨立版</title>
</head>
<body>
<input type="text" id="test1">
<script src="/laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
//執行一個laydate實例
laydate.render({
  elem: '#test1' //指定元素
});
</script>
</body>
</html>

幾乎所有常用的需要都可以在這里找到,但是有一個問題,日期多選怎么實現,這里給大家分享下我解決的方法

圖片:

調用代碼如下:

    <input type="text" id="calendar" value="2015-04-15"/>
    <script src="../src/jquery-1.9.1.min.js"></script>
    <script src="../src/calendar.js"></script>
    <script>
        $(".calendar4").Calendar({time:true});//時間選擇
        var calendar = new Calendar();
        calendar.init({
            target: $('#calendar'),
            range: ['2015-3-5', '2015-3-25'],
            multiple: true,
            maxdays: 5,
            overdays: function(a) {
                alert('添加已達上限 ' + a + ' 天');
            },
            filter:function(time){
                var date = new Date(time);
                // console.log(date.getDay())
                if(date.getDay()==0||date.getDay()==6){
                    return false;
                }
                return true;
            }
        });
    </script>  

這里提供dome的下載地址,如果有需要,可以點擊下載。

https://download.csdn.net/download/qq_40716795/14963845

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM