最近项目遇到一个需求,就是基于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结束 -->