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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery简易手风琴插件的封装
Oct 13 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查看session内容的函数
2008/08/27 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python写的服务监控程序实例
2015/01/31 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python判断Abundant Number的方法
2015/06/15 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
火山动力Java笔试题
2014/06/26 面试题
如何执行一个shell程序
2012/11/23 面试题
人事助理岗位职责
2013/11/18 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
摩登时代观后感
2015/06/03 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
MySQL常见优化方案汇总
2022/01/18 MySQL