JS-使用layui获取时间并计算两个时间之间的天数

最新推荐文章于 2023-05-17 16:00:46 发布

shishui07

最新推荐文章于 2023-05-17 16:00:46 发布

阅读量1w

点赞数 1

分类专栏： javascript 文章标签： javascript 架构

本文链接：https://blog.csdn.net/shishui07/article/details/61197531

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次使用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>