JS-使用layui獲取時間並計算兩個時間之間的天數

原創

2020-02-21 09:53

第一次使用layui做東西加上不熟悉js鬧了些笑話。特做記錄，防止自己再忘了。
layui是個簡潔，快速的JS架構使用很方便。通過使用layui的laydate組件，來創建時間選擇窗。
script代碼如下：

    layui.use(['layer','laydate'],function(){
    var $=layui.jquery,
    layer=layui.layer,laydate=layui.laydate;
    var start={
            min:'1970-01-01 00:00:00'
            ,max:'2099-12-31 23:59:59'
            ,istoday:false
            ,choose:function(dates){
                end.min=dates;
                end.start=dates;
            }
    }
    var end={
        min:laydate.now()
        ,max:'2099-12-31 23:59:59'
        ,istoday:true
        ,choose:function(dates){
            start.max=dates;
        }
}
document.getElementById('LAY_demorange_s').onclick=function(){
    start.elem=this;
    laydate(start);
}
document.getElementById('LAY_demorange_e').onclick=function(){//調用laydate選擇時間
    end.elem=this;
    laydate(end);
}   
});
    function check(){

var start=document.getElementById("LAY_demorange_s").value;//獲取起始日期
var end=document.getElementById("LAY_demorange_e").value;//獲取結束日期
if(start==""){
    alert("請輸入開始日期！");
    return;
}
else if(end==""){
    alert("請輸入結束日期！");
}
document.getElementById("dayscountshow").value=getDays(start, end);
}
function getDays(startDate,endDate){
var date1Str = startDate.split("-");//將日期字符串分隔爲數組，數組元素分別爲年、月、日      
//根據年、月、日的值創建Date對象
var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
var date2Str = endDate.split("-");
var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
var t1 = date1Obj.getTime();//返回從1970-1-1開始計算到Date對象中的時間之間的毫秒數
var t2 = date2Obj.getTime();//返回從1970-1-1開始計算到Date對象中的時間之間的毫秒數
var datetime=1000*60*60*24; //一天時間的毫秒值 
var minusDays = Math.floor(((t2-t1)/datetime));//計算出兩個日期天數差 
var days = Math.abs(minusDays);//如果結果爲負數，取絕對值
return days;

}

頁面代碼爲：

<div class="layui-input-inline">
    請選擇開始時間：<input class="layui-input" placeholder="請選擇開始日期" id="LAY_demorange_s" >
</div>
<div class="layui-input-inline">
請選擇截止時間：<input class="layui-input" placeholder="請選擇截止時間" id="LAY_demorange_e" >
</div>
</div>
</div>
<div class="layui-input-inline">
<input type="button" value="計算時間差" onclick="check()" >
<input class="layui-input" placehlder="時間間隔" id="dayscountshow">
</div>