JS框架_(Laydate.js)簡單實現日期日曆

時間 2019-11-19

標籤框架 laydate.js laydate 簡單實現日期日曆欄目 JavaScript 简体版

原文原文鏈接

百度雲盤　　傳送門　　密碼:71hfcss

JavaScript日期與時間組件_____laydate.jshtml

日期日曆效果：jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary_日曆日期</title>

<link rel="stylesheet" href="css/laydate.css" />
<script src="js/jquery.min.js"></script>
<script src="js/laydate.js"></script>
<style type="text/css">
 .select-date{font-family:"sta cartman"}
</style>

</head>
<body>

<div class="laydate-box">
    <input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" />
    <div class="select-date">
        <div class="select-date-header">
            <ul class="heade-ul">
                <li class="header-item header-item-one">
                    <select name="" id="yearList"></select>
                </li>
                <li class="header-item header-item-two" onselectstart="return false">
                    <select name="" id="monthList"></select>
                </li>
                <li class="header-item header-item-three" onselectstart="return false" >
                    <span class="reback">回到今天</span>
                </li>
            </ul>
        </div>
        <div class="select-date-body">
            <ul class="week-list">
                <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>
            </ul>
            <ul class="day-tabel"></ul>
        </div>
    </div>
</div>

<script>
    function getSelectDate(result){
        //這裏獲取選擇的日期
        console.log(result);
    }
</script>

</body>
</html>

index.html

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.icon{
    position: absolute;
    top: 5px;
    right: 5px;
    height: 25px;
    width: 25px;
    background: #fff;
}
.laydate-box{
    height: 34px;
    width: 154px;
    border: none;
    margin: 100px 0 0 200px;    
    position: relative;
}
#laydateInput{
    outline: none;
    display: block;
    height: 30px;
    width: 150px;
    font-size: 16px;
    line-height: 30px;    
}
.select-date{
    position: absolute;
    left: 0px;
    top:35px;
    width: 266px;
    height: 301px;
    border: 1px solid #58abff;
    display: none;
}
.select-date-header{
    height: 48px;
    border-bottom: 1px solid #58abff;
}
.heade-ul{
    height: 49px;
}
.header-item{
    height: 28px;
    float: left;
    margin-top: 9px;
}
.header-item select{
    height: 28px;
}
.header-item-one select{
    width: 68px;
    margin-left: 10px;
    height: 30px;
    outline: none;
}
.header-item-one{
    height: 30px;
}
.header-item-two i{
    display: block;
    float: left;
    height: 28px;
    width: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}
.header-item-two i{
    display: block;
    float: left;
    height: 28px;
    width: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}
.header-item-two{
    border: 1px solid #ccc;
    margin-left: 10px;
}
.header-item-two select{
    float: left;
    border: none;
    outline: none;
}
.header-item-two i:nth-child(1){
    border-right: 1px solid #ccc;
}
.header-item-two i:nth-child(3){
    border-left: 1px solid #ccc;
}
.header-item-three{
    margin-left: 30px;
    width: 73px;
}
.header-item-three span{
    display: block;
    height: 100%;
    border: 1px solid #d8d8d8;
    background: #f9f9f9;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
}
.header-item-three span:hover{
    border-color: #388bff;
}
.header-item-three span.active{
    border-color: #388bff;
}
.week-list{
    height: 35px;
    width: 100%;
    border-bottom: 1px solid #c8cacc;
}
.week-list li{
    float: left;
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    margin: 0 1px;
    /*font-weight: bold;*/
    
}
.week-list li:nth-child(7){
    color:#e02d2d
}
.week-list li:nth-child(1){
    color:#e02d2d
}
.tabel-line{
    height: 35px;
    border-bottom: 1px solid #c8cacc;
}
.tabel-ul{
    height: 35px;
}
.tabel-li{
    height: 31px;
    width: 31px;
    text-align: center;
    line-height: 31px;
    float: left;
    border: 2px solid #fff;
    margin: 0 1px;
}
.tabel-li.preDays{
    color: #bfbfbf;
}
.tabel-li.nextDay{
    color: #bfbfbf;
}
.tabel-li:hover{
    border-color: #ffbb00;
}
.tabel-li.showClick{
    border-color: #ffbb00;
}
.tabel-li.active{
    background: #ffbb00;
    color: #fff !important;    border-color:#ffbb00;
}
.tabel-li.weekColor{
    color:#e02d2d;
}

laydate.css

源代碼：傳送門ide

JS日期與時間組件/插件官方演示與講解：傳送門ui

參考文檔：傳送門spa

實現過程插件

1、設置日期日曆位置3d

.laydate-box{
    height: 34px;
    width: 154px;
    border: none;
    margin: 100px 0 0 200px;    
    position: relative;
}

static : 　無特殊定位，對象遵循HTML定位規則 
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊經過z-index屬性定義。此時對象不具備邊距，但仍有補白和邊框 
relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置
fixed : 　IE5.5及NS6尚不支持此屬性

position屬性：

2、日期日曆code

.select-date{
    position: absolute;
    left: 0px;
    top:35px;
    width: 266px;
    height: 301px;
    border: 1px solid #58abff;
    display: none;
}

border設置 4 個邊框的樣式：orm

border-width
border-style
border-color

display 屬性規定元素應該生成的框的類型

.select-date-header{
    height: 48px;
    border-bottom: 1px solid #58abff;
}

border-bottom 簡寫屬性把下邊框的全部屬性設置到一個聲明中

border-bottom-width
border-bottom-style
border-bottom-color

//年選擇器
laydate.render({
  elem: '#test2'
  ,type: 'year'
});
//年月選擇器
laydate.render({
  elem: '#test3'
  ,type: 'month'
});
//時間選擇器
laydate.render({
  elem: '#test4'
  ,type: 'time'
});
//時間選擇器
laydate.render({
  elem: '#test5'
  ,type: 'datetime'
});

年月日選擇器

//日期範圍
laydate.render({
  elem: '#test6'
  ,range: true
});
//年範圍
laydate.render({
  elem: '#test7'
  ,type: 'year'
  ,range: true
});
//年月範圍
laydate.render({
  elem: '#test8'
  ,type: 'month'
  ,range: true
});
//時間範圍
laydate.render({
  elem: '#test9'
  ,type: 'time'
  ,range: true
});
//日期時間範圍
laydate.render({
  elem: '#test10'
  ,type: 'datetime'
  ,range: true
});

範圍選擇

//限定可選日期
var ins22 = laydate.render({
  elem: '#test-limit1'
  ,min: '2016-10-14'
  ,max: '2080-10-14'
  ,ready: function(){
    ins22.hint('日期可選值設定在 <br> 2016-10-14 到 2080-10-14');
  }
});
//先後若干天可選，這裏以7天爲例
laydate.render({
  elem: '#test-limit2'
  ,min: -7
  ,max: 7
});
//限定可選時間
laydate.render({
  elem: '#test-limit3'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
  ,btns: ['clear', 'confirm']
});

控制選擇日曆範圍

//自定義格式
laydate.render({
  elem: '#test11'
  ,format: 'yyyy年MM月dd日'
});
laydate.render({
  elem: '#test12'
  ,format: 'dd/MM/yyyy'
});
laydate.render({
  elem: '#test13'
  ,format: 'yyyyMM'
});
laydate.render({
  elem: '#test14'
  ,type: 'time'
  ,format: 'H點M分'
});
laydate.render({
  elem: '#test15'
  ,type: 'month'
  ,range: '→'
  ,format: 'yyyy-MM'
});
laydate.render({
  elem: '#test16'
  ,type: 'datetime'
  ,range: '到'
  ,format: 'yyyy年M月d日H時m分s秒'
});

自定義格式

//墨綠主題
laydate.render({
  elem: '#test29'
  ,theme: 'molv'
});
//自定義顏色
laydate.render({
  elem: '#test30'
  ,theme: '#393D49'
});
//格子主題
laydate.render({
  elem: '#test31'
  ,theme: 'grid'
});

日曆主題

感謝 layDate 日期與時間組件：傳送門

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。