本文使用的是layui的日历插件,原理差不多。
HTML部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<link href="css/laydate.css" type="text/css">-->
<script src="js/laydate/laydate.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="bigdiv">
<span id="testView"></span>
<div id="test2"></div>
</div>
</body>
</html>
js代码
window.onload=function(){
// layui日历
//嵌套在指定容器中
laydate.render({
elem: '#test2',
position: 'static',
change: function (value, date) { //监听日期被切换
lay('#testView').html(value);
}
});
//获取日期
function gettime1() {
var layuis = document.getElementsByClassName("layui-laydate-main")[0]
layuis.onclick= function (e) {
// console.log(e)
var focus = e.target
// console.log(focus)
// console.log(focus.getAttribute("lay-ymd"))
var getDate = focus.getAttribute("lay-ymd")
// 处理月份和日小于10前面没有0的问题
var getDatea = getDate.split("-") //先将日期做成数组
// console.log(getDatea)
var yeara = getDatea[0]
var mona = getDatea[1] < 10 ? "0" + getDatea[1] : getDatea[1]
var daya = getDatea[2] < 10 ? "0" + getDatea[2] : getDatea[2]
getDatea = yeara + "-" + mona + "-" + daya
console.log(getDatea)
// return getDatea
}
}
gettime1();
}