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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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中使用redis队列操作实例代码
2013/02/07 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
python如何将图片转换为字符图片
2020/08/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
歌舞青春观后感
2015/06/10 职场文书
体育教师研修感悟
2015/11/18 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书