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.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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生成静态文件的多种方法分享
2012/07/17 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
JS实现贪吃蛇游戏
2019/11/15 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python操作csv文件实例详解
2017/07/31 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python游戏地图最短路径求解
2019/01/16 Python
python实现爬山算法的思路详解
2019/04/09 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
如何基于python操作excel并获取内容
2019/12/24 Python
django实现后台显示媒体文件
2020/04/07 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
护理毕业生自我鉴定
2014/02/11 职场文书
公司搬迁通知
2015/04/20 职场文书
入党函调证明材料
2015/06/19 职场文书
《青山不老》教学反思
2016/02/22 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
Android实现图片九宫格
2022/06/28 Java/Android