您的位置:首页 > 产品设计 > UI/UE

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

2017-03-10 15:09 766 查看
第一次使用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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 架构