使用 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的一个属性。
**首先得引入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的一个属性。
相关文章推荐
- js 日期控件laydate使用
- Android 日期控件(DatePickerDialog)与时间控件(TimePickerDialog)的使用
- 使用Javascript计算时间差和计算日期加天数后的日期值
- 安卓控件使用系列18:DatePicker日期控件和TimePicker时间控件的使用
- js 日期控件laydate使用
- My97 DatePicker日期时间控件的配置使用方式
- android 时间日期控件的使用(DatePicker、TimePicker、DatePickerDialog、TimePickerDialog、AnalogClock、DigitalClock)
- Angularjs中使用layDate日期控件解决其与ng-model使用时的冲突
- 【经验】Angularjs 中使用 layDate 日期控件
- laydate日期控件的使用
- Angularjs中使用layDate日期控件示例
- joda.time 处理时间--计算2个日期之间的天数
- DatePicker TimePicker---时间日期控件的使用
- Struts2里面 s:textfield标签 Date类型的格式化以及日期时间控件使用
- Windows Phone 7 日期选择控件DatePicker和时间选择控件TimePicker
- MYSQL计算两日期/时间之间相差的天数,秒数...分钟
- Windows Phone 7 日期选择控件DatePicker和时间选择控件TimePicker
- VC控件DateTimePicker使用方法 ,获取日期和时间
- 如何使用Dojo的DatePicker控件制作联动日期选择器
- 两种方式使用android时间和日期控件