PC端比较好用的日期选择器
2017-11-23 本文已影响57人
回不去的那些时光
今天在做东西的时候需要用到日期选择器,就去网上查阅了一些资料,发现了两个比较好用的日期选择器就整理了下来。
1、bootstrap-datepicker
<link rel="stylesheet" href="./plugs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<input class="date" type="text">
<script src="plugs/jquery/dist/jquery.min.js"></script>
<script src="plugs/bootstrap/js/bootstrap.min.js"></script>
<script src="plugs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
$(function () {
$('.date').datepicker({
autoclose: true,//选中之后自动隐藏日期选择框
format: "yyyy-mm-dd"//日期格式
});
$(".date").datepicker("setDate", nowDate());//设置默认时间
});
// 获取系统当前时间
function nowDate() {
var myDate = new Date();
//获取当前年
var year = myDate.getFullYear();
//获取当前月
var month = myDate.getMonth() + 1;
//获取当前日
var date = myDate.getDate();
return year + '-' + month + '-' + date;
}
</script>
2、layDate
<input id="date" type="text">
<script src="plugs/laydate/laydate.js"></script>
<script>
laydate.render({
elem: '#date', // 指定元素
lang: 'en', // 指定语言
value: nowDate(), // 默认时间
theme: '#393D49' // 主题
});
// 获取系统当前时间
function nowDate() {
var myDate = new Date();
//获取当前年
var year = myDate.getFullYear();
//获取当前月
var month = myDate.getMonth() + 1;
//获取当前日
var date = myDate.getDate();
return year + '-' + month + '-' + date;
}
</script>