jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
时间:2019-03-30
本文章向大家介绍jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数,主要包括jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
功能需求如下:
1) 使用 datetimebox 日期控件, 选择开始日期 startdate, 结束日期 leavedate ,然后求两日期间相隔天数 numdays ;
2) 天数 x 补助 = 包干费用; (numdays * allowance = def11 )
下面是效果图:
一. form 表单:开始时间,结束时间两个都使用 onChange 事件;
<td>派遣时间:</td> <td><input class="easyui-datetimebox" id="startdate" name="startdate" data-options="onChange:onSelectT" /></input></td> <td>离开客户处时间:</td> <td><input class="easyui-datetimebox" id="leavedate" name="leavedate" data-options="onChange:onSelectT" /></input></td> <td>售后所用天数:</td> <td><input class="easyui-numberbox" id="numdays" name="numdays" data-options="onChange:onSelectT" precision="0" min="0" readonly ="readonly"/></input> </td> <td>补助:</td> <td><input name="allowance" id="allowance" class="easyui-numberbox" precision="0" min="0"></td> <td>包干费用:</td> <td><input name="def11" id="def11" class="easyui-numberbox" precision="0" min="0" readonly ="readonly"></td>
二.计算相隔天数
//计算日期方法: function onSelectT(d) { var sd = $('#startdate').datebox('getValue').replace(/-/g, '/'), ed = $('#leavedate').datebox('getValue').replace(/-/g, '/'); if (sd != '' && ed != '') { if (sd > ed) { $.messager.alert('警告','结束时间要 大于 开始时间','warning'); } else { var totalMS = new Date(ed).getTime() - new Date(sd).getTime();//得到相差的毫秒数 day = Math.ceil(totalMS / 1000 / 24 / 60 / 60);//得到相差天数,不满一天不算一天将Math.ceil改为Math.floor $("#numdays").numberbox("setValue", day); //所用天数 */ } } }
三.计算费用
$(function() { //(根据 售后天数 *补助)计算包干费用 $("input",$("#allowance").next("span")).blur(function(){//鼠标离开 '补助' 栏后,触发 var adays =$("#numdays").numberbox('getValue');//天数 var abz =$("#allowance").numberbox('getValue');//补助 var abaogan = adays * abz;//(售后天数*补助=包干费用) $("#def11").numberbox('setValue', abaogan);//包干费用 }); })
接下来是应用 (一些需要注意的细节):
(1)定义全局变量 day
var day = 0;//默认为 day = 0
(2)添加方法();
function addMethod() { initialise(); //调用初始化函数 onSelectT();//计算相隔时间天数 day = 0;// .form("clear");方法不能成功清除上次缓存。所以在添加方法中重新声明 day = 0,作用是第二次点击添加时,将上次的天数重置为 0 天, <span style="white-space:pre"> </span>替代 .form("clear"); $('#editWindow').dialog('open').dialog('center').dialog('setTitle', '添加派遣单信息'); $('#eidtform').form("clear"); $("#allowance").numberbox("setValue", 0); //补助 $("#numdays").numberbox("setValue", 0); //添加默认塞值 (所用天数) $("#def11").numberbox("setValue", 0); //包干费用 $('#editWindow').window("open"); }
以上所述是小编给大家介绍的jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设置事务超时时间的问题及Oracle数据库update和锁
- 超赞,压缩20M文件从30秒到1秒的优化过程
- 超赞,给你推荐20个使用 Java CompletableFuture的例子!
- Java入门编程练习题
- Spark UDF加载外部资源
- Flink SQL FileSystem Connector 分区提交与自定义小文件合并策略
- Facebook面试题: 用递归和迭代手写Array.prototype.flat()
- Kubernetes插件之ip-masq-agent
- 抽丝剥茧Kotlin - 协程
- 使用Java8中的Optional类来消除代码中的null检查
- 通俗讲解从Transformer到BERT模型!
- 「R」使用有限混合模型
- Kaggle经典数据分析项目:泰坦尼克号生存预测!
- 零基础学习梯度下降算法
- Spring JPA 依赖配置