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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
如何基于jQuery实现五角星评分
Sep 02 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代码实现支付宝批量付款
2015/12/24 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python select.select模块通信全过程解析
2017/09/20 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
解决DataFrame排序sort的问题
2018/06/07 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
给校长的一封建议书
2014/03/12 职场文书
推广普通话标语
2014/06/27 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers