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中的deferred使用方法
Mar 27 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现全选按钮
Jan 01 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
用session做客户验证时的注意事项
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP7新增函数
2021/03/09 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
js中this用法实例详解
2015/05/05 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
python中dir函数用法分析
2015/04/17 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
社会实践心得体会
2014/01/03 职场文书
关于召开会议的通知
2015/04/15 职场文书
狂人日记读书笔记
2015/06/30 职场文书
周末问候语大全
2015/11/10 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Nginx进程管理和重载原理详解
2021/04/22 Servers
Golang表示枚举类型的详细讲解
2021/09/04 Golang