laydate控件选择开始结束时间后自动计算请假时长

laydate控件选择开始结束时间后自动计算请假时长
基于bootstrap的日期控件可以自动计算时长，但是个人觉得bootstrap的日期控件外表过于丑陋，所以想用laydate实现同样的效果。下面介绍一下主要的方法：
1.写2个laydate渲染的input，用来放开始时间、结束时间，JS渲染日期控件选择就不多说了，官网都有，这个比较简单；
2.问题关键点是获取laydate选择后的时间值，使用JQ的语法通过$("#starttime").val();语法根本获取不到选择后的开始时间，这个是由于用了laydate控件后，改变了html本身的渲染结构，所以我用到了done:function(){}回调事件，在回调事件里可以获取到刚刚选择完的开始时间。在JS渲染时间控件外面定义2个变量，用来存放done:function(){}回调事件里的形参。在done:function(){}函数里面调用时长计算的回调事件，话不多说，直接看代码：

Html代码：

<div class="form-group">
                <label class="col-sm-3 control-label"><span style="color: red; ">*</span>开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="startTime" id="startTime" class="form-control calcTotalSecondInput" placeholder="yyyy-MM-dd HH:mm" type="text" required autocomplete="off">
                    </div>
                </div>
 </div>
 <div class="form-group">
                <label class="col-sm-3 control-label"><span style="color: red; ">*</span>结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="endTime" id="endTime" class="form-control calcTotalSecondInput" placeholder="yyyy-MM-dd HH:mm" type="text" required autocomplete="off">
                    </div>
                </div>
   </div>
   <div class="form-group">
                <label class="col-sm-3 control-label">请假时长：</label>
                <div class="col-sm-8">
                    <input name="totalTime" class="form-control" type="text" style="display: none;">
                    <input name="totalTimeText" class="form-control" type="text" readonly>
                </div>
            </div>

JS代码

 	 var starttime="";
     var endtime="";
     layui.use('laydate', function(){
     		  var laydate = layui.laydate;
     		  //JS渲染时间控件
     		 laydate.render({
     		    elem: '#startTime',
     		 	trigger:'click',//兼容低分辨率下时间控件弹出框显示的位置
     		 	type:'datetime',//日期控件类型：可以选择到时刻
     		 	done:function(value,date){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
     		 		console.log(value); //得到日期生成的值，如：2017-08-18
     		 		jstime(value,$('#endTime').val());//自动计算时长的函数调用，实参传递
     		 	}
     		  });
     		laydate.render({
     		    elem: '#endTime',
     		 	trigger:'click', 
     		 	type:'datetime',
     		 	done: function(value, date){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
     		 		console.log(value);  //得到日期生成的值，如：2017-08-18
     		 		jstime($('#startTime').val(),value);
     		 		 }
     		  });
        }); 
        // 监听开始和结束日期填写，动态生成请假时长
        	function jstime(starttime,endtime) {
            if (!starttime || !endtime) {
            	/*开始或者结束日期为空时，结束 */
               return;
            }
            if (validateStartTimeAndEndTime(starttime,endtime)) {
            //计算请假时长、存放请假时长
                var totalSecond = calcTotalSecond(starttime,endtime);
                $('input[name="totalTime"]').val(totalSecond);
                var dateSub = formatTotalDateSub(totalSecond);
                $('input[name="totalTimeText"]').val(dateSub);
            }
        };
		//判断结束日期大于开始日期
        function validateStartTimeAndEndTime(starttime,endtime) {
            if (starttime >= endtime) {
                $.modal.alertWarning("结束时间必须大于开始时间");
                return false;
            }
            return true;
        }

效果如下图：

需要注意一点：用laydate日期控件的时候，需要引入laydate.js，这个是常规了，就不需要在步骤里特意写了。