QQBot/web/calendar.html

123 lines
3.6 KiB
HTML
Raw Normal View History

2022-08-22 21:39:06 +08:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>BiliBili下载器</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
</head>
<body>
<div class="myDiy">
<blockquote class="layui-elem-quote">日历管理
</blockquote>
<br/><br/><br/>
<div class="layui-bg-gray layui-row layui-col-space15" id="card" style="padding: 30px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">日历</label>
<div class="layui-input-block">
<div id="calendar"/>
</div>
</div>
<br/>
<br/>
<br/>
<div class="layui-form-item">
<label class="layui-form-label">间隔</label>
<div class="layui-input-block">
<select id="interval" lay-verify="required">
<option value=""></option>
<option value="0">相隔X天</option>
<option value="1">每周X</option>
<option value="2">每月X号</option>
</select>
</div>
</div>
<blockquote class="layui-elem-quote"><span id="dateText">日期选择</span>
</blockquote>
<div class="layui-form-item">
<label class="layui-form-label">间隔日期</label>
<div class="layui-input-block">
<input type="text" id="day" required lay-verify="required" placeholder="天数"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<a class="layui-btn" id="setCalendar">新增规则</a>
</div>
</div>
</form>
</div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="layui/jquery-3.2.1.js"></script>
<script>
2022-09-01 21:27:07 +08:00
let marks = []
let laydate;
let datatmp;
2022-08-22 21:39:06 +08:00
layui.use('laydate', function () {
let dayDateObj
2022-09-01 21:27:07 +08:00
laydate = layui.laydate;
datatmp = laydate.render({
elem: '#calendar' //指定元素
, position: 'static'
// , mark: marks
, holidays: marks
, done: function (value, date, endDate) {
console.log(date)
dayDateObj = date;
$('#dateText')[0].innerHTML = "从" + date.date + "号开始计算"
}
});
2022-08-22 21:39:06 +08:00
$.get("/calendar/all.do", function (json) {
//执行一个laydate实例
2022-09-01 21:27:07 +08:00
// marks = json.data.date;
2022-08-22 21:39:06 +08:00
showLayDate()
})
$('#setCalendar').click(function () {
2022-09-01 21:27:07 +08:00
let interval = $('#interval')[0].value
let day = $('#day')[0].value
let intervalText = $('#interval').find("option:selected").text();
intervalText = intervalText.replace('X', day)
2022-08-22 21:39:06 +08:00
layer.open({
title: '确认'
2022-09-01 21:27:07 +08:00
, content: '确认从' + dayDateObj.date + '号开始, ' + intervalText + ' 开始提醒?'
, yes: function (index, layero) {
2022-08-22 21:39:06 +08:00
}
});
})
});
</script>
<style>
.myDiy {
width: 40%;
height: 300px;
margin-top: 10px;
margin-left: 25%;
}
.button {
width: 100px;
height: 100px;
font-size: 1em;
}
</style>
</html>