一个可以给日期提供输入和清空输入的时间插件
程序员文章站
2022-06-09 14:41:32
...
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>时间的插件</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,body{
background: rgb(228,235,243);
}
.dateMoney {
position: relative;
background: #fff;
width: 570px;
height: 600px;
}
.dateMoney-year {
width: 162px;
}
.dateMoney-year :nth-child(1) {
float: left;
margin-top: 7px;
cursor: pointer;
}
.dateMoney-year :nth-child(2) {
float: left;
margin-left: 10px;
}
.dateMoney-year :nth-child(3) {
float: left;
margin-top: 7px;
margin-left: 10px;
cursor: pointer;
}
.dateMoney-from {
width: 100%;
margin-top: 18px;
}
.dateMoney-from-in1 {
background: #F0F0F0;
padding: 7px 10px;
}
.dateMoney-from-in1-1 {
width: 340px;
}
.dateMoney-from-in1 span {
float: left;
margin-top: 7px;
}
.dateMoney-from-in1 input {
float: left;
width: 120px !important;
margin-left: 10px;
padding: 5px 7px;
border-radius: 4px;
border: 1px solid #ccc;
}
.dateMoney-from-in1-1 button {
float: left;
margin-left: 7px;
margin-top: 2px;
}
.dateMoney-week {
margin-top: 10px;
background: #FAFAFA;
padding: 5px 0px;
}
.dateMoney-week span {
display: inline-block;
width: 13.4%;
background: #FAFAFA;
}
.dateMoney-day {
width: 100%;
}
.dateMoney-day table {
width: 100%;
border-collapse:collapse;
}
.dateMoney-day > table th, td {
border: 1px solid #ccc;
width: 13.4%;
}
.ttd {
position: relative;
width: 100%;
height: 66px;
}
.ttd-s1 {
position: absolute;
top: 4px;
left: 4px;
}
.ttd-s2{
position: absolute;
bottom: 5px;
left: 7px;
}
.ttd-in1 {
position: absolute;
bottom: 5px;
right: 4px;
width: 55px;
border-radius: 4px;
border: 1px solid #ddd;
}
.dateMoney-smb {
width: 100%;
padding: 10px 0px;
}
</style>
</head>
<body>
<div class="dateMoney" align="center">
<div class="dateMoney-year">
<img width="24px" src="./images/leftarrow.png" id="leftarrow"/>
<h4 id="dm-y">2015-08-01</h4>
<img width="24px" src="./images/rightarrow.png" id="rightarrow"/>
<div style="clear:both"></div>
</div>
<!--输入价格位置-->
<div class="dateMoney-from">
<div class="dateMoney-from-in1">
<div class="dateMoney-from-in1-1">
<span>设置当月默认价格</span>
<input type="text" id="btip" value=""/>
<span style="margin-left: 10px">元</span>
<button type="button" class="btn btn-default btn-sm" id="btde">确定</button>
<div style="clear:both"></div>
</div>
</div>
<!--星期位置-->
<div class="dateMoney-week">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>日</span>
<div style="clear:both"></div>
</div>
<!--天数的显示-->
<div class="dateMoney-day">
<table id="dtable">
</table>
</div>
<!--提交-->
<div class="dateMoney-smb">
<button type="button" class="btn btn-primary" id="getSubArr">提交</button>
<button type="button" class="btn btn-default" id="clearSubArr">清空</button>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var subArr = [] // 提交数据的数组
timeInit() // 刚进入界面的效果
/**
*点击提交的结果
**/
$("#getSubArr").click(function () {
console.log(subArr);
})
/**
*点击清空的功能
**/
$("#clearSubArr").click(function () {
var timeStr = $("#dm-y").text();
var arrRun = timeStr.split("-");
var y = arrRun[0]
var m = arrRun[1]
var d = arrRun[2]
var nd = countDays([y,m])
$("#dtable").empty();
createElement(y, m, nd, '', 3)
})
/**
*点击左箭头的效果
**/
$("#leftarrow").click(function () {
var timeStr = $("#dm-y").text();
var arrRun = timeStr.split("-");
var y = arrRun[0]
var m = arrRun[1]
var d = arrRun[2]
if (m == '01') {
m = '12'
y = y*1 - 1
} else {
if (m.charAt(0) == '0') {
m = m.charAt(1)*1 - 1;
} else {
m = m*1 - 1;
}
if (m >= 1 && m <= 9){
m = '0' + m;
}
}
var cud = y + '-' + m + '-' + d;
$("#dm-y").text(cud);
var nd = countDays([y,m]);
$("#dtable").empty();
createElement(y, m, nd, '', 2);
})
/**
*点击右箭头的效果
**/
$("#rightarrow").click(function () {
var timeStr = $("#dm-y").text();
var arrRun = timeStr.split("-");
var y = arrRun[0]
var m = arrRun[1]
var d = arrRun[2]
if (m == '12') {
m = '01'
y = y*1 + 1
} else {
if (m.charAt(0) == '0') {
m = m.charAt(1)*1 + 1;
} else {
m = m*1 + 1;
}
if (m >= 1 && m <= 9){
m = '0' + m;
}
}
var cud = y + '-' + m + '-' + d;
$("#dm-y").text(cud);
var nd = countDays([y,m]);
$("#dtable").empty();
createElement(y, m, nd, '', 2);
})
/**
*点击确认的按钮
**/
$("#btde").click(function() {
var val = $("#btip").val();
var timeStr = $("#dm-y").text();
var arrRun = timeStr.split("-");
var y = arrRun[0];
var m = arrRun[1];
var arrTimes = [y,m]
var nd = countDays(arrTimes)
$("#dtable").empty()
if (val) {
createElement(y, m, nd, val, 1)
} else {
createElement(y, m, nd, '', 2)
}
})
/**
*刚进入界面的效果
**/
function timeInit() {
timeArr = getNowFormatDate()
var seperator1 = "-";
var t = timeArr[2]
var currentdate = timeArr[0] + seperator1 + timeArr[1] + seperator1 + timeArr[2];
$("#dm-y").text(currentdate)
var nd = countDays(timeArr)
// getWeek(timeArr[0])
createElement(timeArr[0], timeArr[1], nd, '', 2)
}
/**
*创建下面日期的内容
*y:传入年份
*m:传入月份
*n:传入的天数
*moe:传入的金额
*bol:1 代表插入数据, 2代表不插入数据, 3代表删除数据
**/
function createElement(y, m, n, moe, bol) {
var i = 1;
for (var k = 0; k <= 5; k++) {
var tr = $("<tr></tr>")
for (var j = 0; j <= 6; j++) {
var sdate = y + "-" + m + "-" + i;
var sw = getWeek(sdate)
var xx = i;
var yy = m;
if (xx >= 0 && xx <= 9) {
xx = "0" + xx;
}
var ssd = y + "-" + yy + "-" + xx;
var td = undefined;
if (sw == "六" && j == 5 && i <= n || sw == "日" && j == 6 && i <= n || sw == "一" && j == 0 && i <= n ||
sw == "二" && j == 1 && i <= n || sw == "三" && j == 2 && i <= n || sw == "五" && j == 4 && i <= n ||
sw == "四" && j == 3 && i <= n) {
var sval = ''
if (moe == '') {
if (bol == 3) {
sval = ''
} else {
var nn1 = subArr.findIndex(function (ele) {
return ele.time == ssd
})
if (nn1 !== -1) {
sval = subArr[nn1].money;
}
}
} else {
sval = moe
}
var obj = {time: ssd, money: sval}
td = $("<td><div class='ttd'>" +
"<span class='ttd-s1'>"+i+"</span>"+
"<span class='ttd-s2'>￥</span>"+
"<input class='ttd-in1' type='text' value='"+sval+"' onchange='eventBegin("+y+","+m+","+i+",this.value)'/>"+
"</div></td>");
if (bol == 1) {
insertDate(obj)
} else if (bol == 3) {
clearDate(obj)
}
i++;
} else {
td = $("<td><div class='ttd'></div></td>")
}
tr.append(td)
}
$("#dtable").append(tr)
}
}
/*
* 获取当前时间的方法
*/
function getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// var currentdate = year + seperator1 + month + seperator1 + strDate;
var dateArray = [year, month, strDate]
return dateArray;
}
/**
* 根据时间计算出天数
*/
function countDays(e) {
var y = e[0];
var m = e[1];
var dd = 0
if (m == '02') {
if (y%4==0 && (y%100!=0 || y%400==0)) {
dd = 29
} else {
dd = 28
}
} else if (m == '01' || m == '03' || m == '05' || m == '07' || m == '08' || m == '10' || m == '12') {
dd = 31;
} else {
dd = 30;
}
return dd;
}
/**
* 根据时间计算出星期几
*/
function getWeek(date) {
var arys1 = new Array();
arys1 = date.split('-'); //日期为输入日期，格式为 2013-3-10
var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
var week1=String(ssdate.getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")//就是你要的星期几
return week1;
}
/**
*修改input后,触发的事件
**/
function eventBegin(y,m,i,val) {
if (m >= 1 && m <= 9) {
m = "0" + m;
}
var xx = i;
if (xx >= 0 && xx <= 9) {
xx = "0" + xx;
}
var d = y + "-" + m + "-" + xx;
var u = subArr.findIndex(function(ele) {
return ele.time == d
})
if (u == -1) {
var obj = {time: d, money: val}
subArr.push(obj)
} else {
subArr[u].money = val
}
}
/**
*是否插入数据源的方法
*obj = {time:'',money:''}
**/
function insertDate(obj) {
var su = subArr.findIndex(function(ele) {
return ele.time == obj.time
})
if (su == -1) {
subArr.push(obj)
} else {
subArr[su].money = obj.money
}
}
/**
*清空数据的方法
*obj = {time:'',money:''}
**/
function clearDate(obj) {
var sn = subArr.findIndex(function(ele) {
return ele.time == obj.time
})
if (sn !== -1) {
subArr.splice(sn, 1);
}
}
</script>
</body>
</html>