jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数


Posted in jQuery onJune 13, 2017

功能需求如下:

  1) 使用 datetimebox 日期控件, 选择开始日期 startdate, 结束日期 leavedate ,然后求两日期间相隔天数 numdays ;

  2) 天数 x 补助 = 包干费用; (numdays * allowance = def11 )

下面是效果图:

jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数

一. 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 取两个日期间相隔的天数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
You might like
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
精神文明建设标语
2014/06/16 职场文书
验房委托书
2014/08/30 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
推广普通话的宣传语
2015/07/13 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
windows系统搭建WEB服务器详细教程
2022/08/05 Servers