您的位置:首页 > 其它

使用 laydate时间控件计算2个时间日期的天数

2017-06-23 15:43 2061 查看
laydate控件的网址 http://www.layui.com/laydate/
**首先得引入laydate的js**

在 $(document).ready(function() {

  laydate({
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
                        elem: '#srt1', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                        event: 'focus' ,//响应事件。如果没有传入event,则按照默认的click
                       choose: function(){ //选择日期完毕的回调
           
   hh();
                          }
                     });

laydate({
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
                       elem: '#str2', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                      event: 'focus', //响应事件。如果没有传入event,则按照默认的click
                     choose: function(){ //选择日期完毕的回调
           
                hh();
                                  }
                 });

});

html部分

                       <input id="str1" name="str1" type="text" style="width:180px" maxlength="20" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${leaveInput.qjrqstart}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span style="margin-left:5px;margin-right:5px;">至</span>
<input id="str2" name="str2" type="text" maxlength="20" style="width:180px" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${leaveInput.qjrqend}" pattern="yyyy-MM-dd HH:mm:ss"/>" />
<span style="margin-left:30px;">共</span>
<form:input path="str3" htmlEscape="false" style="width:55px" maxlength="10" class="form-control required"/>
<span style="margin-left:5px;">天</span> 

js计算时间部门

function hh(){
//alert(123);

  var kaishi=document.getElementById("str1").value;
       var jieshu=document.getElementById("str2").value; 
if((kaishi!=="")&&(jieshu!=="")){
var date1 = new Date(kaishi)
var date2 = new Date(jieshu)
 
var s1 = date1.getTime(),s2 = date2.getTime();
var total = (s2 - s1)/1000;
var day = parseInt(total / (24*60*60));//计算整数天数
var afterDay =( total - day*24*60*60)/60/60;//取得算出天数后剩余的小时
if(afterDay<5 && afterDay>0 ){
var days=day+0.5;
document.getElementById("str3").value=days;
}else if(afterDay==0){
document.getElementById("str3").value=day;
}
else {
var days=day+1;
document.getElementById("str3").value=days;
}
} else{
return;
}
}

主要是laydate的choose: function(){ //选择日期完毕的回调 

hh();} 回调计算时间的方法。在input文本框中用onchange事件也可以,但是与laydate控件冲突,所以,就用了laydate的一个属性。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: