$(document).ready(function(){ //输入框事件 $('#probation').bind('input propertychange', function() { var induction = $("#induction").val();//取出时间 if (""==induction||null==induction||undefined==induction){ return alert("请先输入入职日期"); } var addDate =new Date(induction); var probation = $("#probation").val();//取出输入值 var newDate = DateAdd(probation,addDate); //初始化值 $('#inDueForm').val(date_riqi(newDate,0)) }); //日期选择事件(此处为转正日期) $("#inDueForm").on("hide.uk.datepicker", function (event) { var init = $(this).val(); var induction = $("#induction").val();//取出入职时间 if (""==induction||null==induction||undefined==induction){ return alert("请先输入入职日期"); } var probation= DateDiff(init,induction); $("#probation").val(probation);//设置试用期输入值 }); });
<div class="uk-form-row"> <label class="uk-form-label" for="induction">入职时间(必填)</label> <div class="uk-form-controls"> <input name="induction" data-uk-datepicker="{format:'YYYY-MM-DD'}" id="induction" value="" > </div> </div> <div class="uk-form-row"> <label class="uk-form-label" for="probation">试用期</label> <div class="uk-form-controls"> <input id="probation" name="probation" value="" placeholder="" type="number"> </div> </div> <div class="uk-form-row"> <label class="uk-form-label" for="inDueForm">转正时间</label> <div class="uk-form-controls"> <input id="inDueForm" data-uk-datepicker="{format:'YYYY-MM-DD'}" name="inDueForm" value=""> </div> </div>
上面js用到的方法如下:可以放到utils里面
微信公众号:
//日期格式 function date_riqi(date,flag){ /** *flag =0 返回 yyyy-mm-dd *flag =1 返回 yyyy-mm-dd hh:mm:ss *flag =2 返回 yyyy-mm-dd hh:mm:ss.ms */ if(typeof(date) == "undefined"){ return ""; } var date = new Date(date); var str_date=""; var month=(date.getMonth()+1); month=month<10?"0"+month:month; var day = date.getDate(); day = day<10?"0"+day:day; var hour = date.getHours(); hour = hour<10?"0"+hour:hour; var minutes = date.getMinutes(); minutes = minutes<10?"0"+minutes:minutes; var seconds = date.getSeconds(); seconds = seconds<10?"0"+seconds:seconds; var ms = date.getMilliseconds(); ms = ms<10?"00"+ms:ms<100?"0"+ms:ms; if (flag==0){ str_date=date.getFullYear()+"-"+month+"-"+day; } if (flag==1){ str_date=date.getFullYear()+"-"+month+"-"+day+ " "+hour+":"+minutes+":"+seconds; } if (flag==2){date.getMinutes() str_date=date.getFullYear()+"-"+month+"-"+day+ " "+hour+":"+minutes+":"+seconds+"."+ms; } return str_date; } //时间加天 function DateAdd(number, date) { date.setDate(date.getDate() + Number(number)); return date; } //返回相差天数 var DateDiff=function (sDate1, sDate2) { //sDate1和sDate2是yyyy-MM-dd格式 var aDate, oDate1, oDate2, iDays; aDate = sDate1.split("-"); oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]); //转换为yyyy-MM-dd格式 aDate = sDate2.split("-"); oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]); iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数 return iDays; //返回相差天数 };
当然还要加载插件:(html head)
<head> <title></title> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/uikit/2.27.2/js/uikit.min.js"></script> <link href="https://cdn.bootcss.com/uikit/2.27.2/css/components/datepicker.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/uikit/2.26.4/js/components/datepicker.js"></script> </head>