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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 前一天或后一天的日期
2008/06/28 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
js面向对象的写法
2016/02/19 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
图解javascript作用域链
2019/05/27 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
保密工作实施方案
2014/02/24 职场文书
个人贷款担保书
2014/04/01 职场文书
建筑安全标语
2014/06/07 职场文书
欢迎横幅标语
2014/06/17 职场文书
全陪导游词开场白
2015/05/29 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers