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手风琴效果
Aug 18 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
layui实现动态和静态分页
2018/04/28 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python生成器推导式用法简单示例
2019/10/08 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python ATM功能实现代码实例
2020/03/19 Python
Python调用飞书发送消息的示例
2020/11/10 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
大学生个人推荐信范文
2013/11/25 职场文书
学校课外活动总结
2014/05/08 职场文书
安全环保演讲稿
2014/08/28 职场文书
安全保证书怎么写
2015/02/28 职场文书
给领导敬酒词
2015/08/12 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python