获取时间日期（一）之日历
获取时间日期（一）之日历
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015、laydate获取日历
作者： 梁柏源
撰写时间：2019/6/1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这次分享的是如何获取当前日期并点击出现日历事件，本人曾在各种网页如****、蚂蚁部落等等，看各位前辈是如何获取当前日期并点击出现日历的时间，然后对比了一下layui里的获取方法，都各有春秋，所以特地研究了一下。
layui是压缩封装的框架（虽然以前比较坑），没错它就是layui中的laydate。怎么说呢，laydate中包含了大量的日期插件，这其中主要是年月、年、日期、时间、日期时间五个类型的选择方式为核心，这次讲的是日历是属于日期中的。这次讲两种个日历的方法（主要还是layui.laydate的获取方法），首先让我们来看一下layui.laydate的获取方法：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"> @*模式兼容*@
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!--width=device-width 表示宽度是设备屏幕的宽度 initial-scale=1表示初始的放缩比例-->
<!--shrink-to-fit=no 自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width" />
<title>日期</title>
<link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
//这是需要的插件layui.css
</head>
<body>
<form class="form-inline">
<input type="text" class="form-control form-control-sm" id="test1" style="width:100px">
</form>
<script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="~/Plugins/layui/layui.js"></script>
//这个layui.js也是需要的插件，bootstrap.min.js只是顺带的（样式需求，layui中样式没bootstrap中的好）
<script>
var layer, layuiTable;//保存layui模块以便全局使用
//获取日历
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1', //指定元素//可以顺便给跟上面一致就行
});
});
</script>
</body>
</html>
然后就没了，就这么简单，毕竟只是引用了一下框架而已，这种用法比较广；下看一下代码的运行结果，首先页面上出现这货 （这货其实是个input输入框不是按钮）然后点击它
o(*￣)￣*)o出现这个：
好了完美，当然这是一种，还有一种不靠框架的，enmmm感觉是上年代用的，非常实在
<p>
<input type="datetime-local" id="time">
</p>
然后没了，简洁吧，没谁了但效果嘛，这样子：
感觉好像少了什么...时分秒？算了不管咯，点击小锥子：
这里得解释一下，这个日历中右上的中间小圆点是现在的意思。