最近项目遇到一个需求,就是基于h5文本框的日期控件来获取当前日期、前一天、后一天的日期,我是使用了一个大兄弟的js代码来实现的额,自己稍微改了一点点;
贴一下我的效果:
下面是html代码:
<div class="date"> <input type="button" class="btn btn-default" id="btn1" value="前一天"> <input type="date" class="form-control" id="date1" value=""> <input type="button" class="btn btn-default" id="btn2" value="后一天"> </div>
下面就是实现的js代码:
<!-- 日期js --> <script> var oBtn1 = document.getElementById('btn1'); var oDate = document.getElementById('date1'); var oBtn2 = document.getElementById('btn2'); /* 日期初始化获取系统当前时间 */ var tcur=showTime(0); $('#date1').val(tcur); /* 前一天 */ $('#btn1').click(function(){ var tcur = showTime(-1); $('#date1').val(tcur); }); /* 后一天 */ $('#btn2').click(function(){ var tcur = showTime(1); $('#date1').val(tcur); }); function addByTransDate(dateParameter, num) { var translateDate = "", dateString = "", monthString = "", dayString = ""; translateDate = dateParameter.replace("-", "/").replace("-", "/"); var newDate = new Date(translateDate); newDate = newDate.valueOf(); newDate = newDate + num * 24 * 60 * 60 * 1000; newDate = new Date(newDate); //如果月份长度少于2,则前加 0 补位 if ((newDate.getMonth() + 1).toString().length == 1) { monthString = 0 + "" + (newDate.getMonth() + 1).toString(); } else { monthString = (newDate.getMonth() + 1).toString(); } //如果天数长度少于2,则前加 0 补位 if (newDate.getDate().toString().length == 1) { dayString = 0 + "" + newDate.getDate().toString(); } else { dayString = newDate.getDate().toString(); } dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString; return dateString; } function reduceByTransDate(dateParameter, num) { var translateDate = "", dateString = "", monthString = "", dayString = ""; translateDate = dateParameter.replace("-", "/").replace("-", "/"); var newDate = new Date(translateDate); newDate = newDate.valueOf(); newDate = newDate - num * 24 * 60 * 60 * 1000; newDate = new Date(newDate); //如果月份长度少于2,则前加 0 补位 if ((newDate.getMonth() + 1).toString().length == 1) { monthString = 0 + "" + (newDate.getMonth() + 1).toString(); } else { monthString = (newDate.getMonth() + 1).toString(); } //如果天数长度少于2,则前加 0 补位 if (newDate.getDate().toString().length == 1) { dayString = 0 + "" + newDate.getDate().toString(); } else { dayString = newDate.getDate().toString(); } dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString; return dateString; } //得到日期 主方法 function showTime(pdVal) { var trans_day = ""; var cur_date = oDate.value == "" ? new Date() : new Date($('#date1').val());/* 如果日期框内为空的话就获取系统的时间为输入框初始化赋值,如果有值(用户自己选择的时间),那就获取用户自己选择的时间 */ var cur_year = cur_date.getFullYear(); var cur_month = cur_date.getMonth() + 1; var real_date = cur_date.getDate(); cur_month = cur_month > 9 ? cur_month : ("0" + cur_month); real_date = real_date > 9 ? real_date : ("0" + real_date); eT = cur_year + "-" + cur_month + "-" + real_date; if (pdVal == 1) { trans_day = addByTransDate(eT, 1); } else if (pdVal == -1) { trans_day = reduceByTransDate(eT, 1); } else { trans_day = eT; } //处理 return trans_day; } /*//当前日期 var tcur=showTime(0); //前一天 var tqyt=showTime(-1); //后一天 var thyt=showTime(1);*/ </script> <!-- 日期js结束 -->