需求说明:
(1)首先是input显示年月日时分格式时间,其中年月日实在本地时间基础上,加上后面联动值.小时默认08:00不变
(2)后面input内显示天数,右侧加减按钮,控制天数,天数确定后,前面的日期联动
手里还有活,话不多少,直接代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width;initial-scale=1">
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
</head>
<style type="text/css">
.daysChange{20px;height:26px;display:inline-block;vertical-align:middle;margin-left:-3px;}
.daysChange>span{20px;height:13px;line-height:11px;text-align:center;font-size:16px;font-weight:bold;color:blue;background:#eee;cursor:pointer;display:block;}
.daysChange>span:hover{background:#ccc;color:darkblue;}
</style>
<body>
<input type="text" id="dateTime" value="">
<input type="text" id="days" value="3天">
<div class="daysChange">
<span id="plus">+</span>
<span id="minus">-</span>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
/* 有效期方法调用begin */
nowDate();
plusDate();
minusDate();
/* 有效期方法调用end */
};
/* 有效期增减 天数*/
function nowDate(){
var days = parseInt($("#days").val());
var myDate = new Date();
var d=myDate.getDate()+days;
var m=myDate.getMonth()+1;
var dataTime = myDate.getFullYear()+'-'+m+'-'+d+' '+'08:00';
$("#dateTime").val(dataTime);
}
function plusDate(){
$("#plus").click(function(){
var days = parseInt($("#days").val())+1;
if(days<100 && days>-1){
addDate(null,days);
$("#days").val(days+'天');
}
});
}
function minusDate(){
$("#minus").click(function(){
var days = parseInt($("#days").val())-1;
if(days<100 && days>-1){
addDate(null,days);
$("#days").val(days+'天');
}
})
}
function addDate(date,days){
var Dates=new Date();
Dates.setDate(Dates.getDate()+days);
var Month=Dates.getMonth()+1;
var Time = Dates.getFullYear()+'-'+Month+'-'+Dates.getDate()+' '+'08:00';
console.log(Time);
$("#dateTime").val(Time);
}
</script>
</html>