登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery easyui 中使用datetimebox 取两个日期间相隔天数的方法

小云云
发布: 2018-01-10 09:16:03
原创
1493人浏览过

本文主要介绍了jqueryeasyui 中使用datetimebox 取两个日期间相隔的天数,需要的朋友参考下吧,希望能帮助到大家。

功能需求如下:

  1) 使用 datetimebox 日期控件, 选择开始日期 startdate, 结束日期 leavedate ,然后求两日期间相隔天数 numdays ;

  2) 天数 x 补助 = 包干费用; (numdays * allowance = def11 )

下面是效果图:

一. 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 = $(&#39;#startdate&#39;).datebox(&#39;getValue&#39;).replace(/-/g, &#39;/&#39;), ed = $(&#39;#leavedate&#39;).datebox(&#39;getValue&#39;).replace(/-/g, &#39;/&#39;); 
   if (sd != &#39;&#39; && ed != &#39;&#39;) { 
    if (sd > ed) { 
    $.messager.alert(&#39;警告&#39;,&#39;结束时间要 大于 开始时间&#39;,&#39;warning&#39;); 
     } 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(){//鼠标离开 &#39;补助&#39; 栏后,触发 
 var adays =$("#numdays").numberbox(&#39;getValue&#39;);//天数 
 var abz =$("#allowance").numberbox(&#39;getValue&#39;);//补助 
 var abaogan = adays * abz;//(售后天数*补助=包干费用) 
 $("#def11").numberbox(&#39;setValue&#39;, 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"); 
   $(&#39;#editWindow&#39;).dialog(&#39;open&#39;).dialog(&#39;center&#39;).dialog(&#39;setTitle&#39;, &#39;添加派遣单信息&#39;); 
   $(&#39;#eidtform&#39;).form("clear"); 
  $("#allowance").numberbox("setValue", 0); //补助 
  $("#numdays").numberbox("setValue", 0); //添加默认塞值 (所用天数) 
  $("#def11").numberbox("setValue", 0); //包干费用 
  $(&#39;#editWindow&#39;).window("open"); 
 }
登录后复制

相关推荐:

jQuery EasyUI API 中文文档 DateTimeBox日期时间框_jquery

EasyUI中的dataGrid的行内编辑实例详解

有关easyui checkbox的一些操作总结

以上就是jQuery easyui 中使用datetimebox 取两个日期间相隔天数的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号