版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/89334967
BootCDN加速器： https://www.bootcdn.cn/
查找日期插件
单击就能看到对应的版本哦！
具体使用如下：
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 对应的bootstrap-datepicker/1.8.0-->
<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<!--中文 bootstrap-datepicker.zh-CN-->
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="row">
<input class="col-md-4 form-control" id="da" />
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$("#da").datepicker({
language:"zh-CN"
});
});
</script>效果:
<body>
<div class="input-group input-daterange da">
<input class="col-md-4 form-control" name="start" />
<span class="input-group-addon">to</span>
<input class="col-md-4 form-control" name="end" />
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$(".da").datepicker({
language:"zh-CN", //中文
format:"yyyy-mm-dd", //格式化日期
startDate:'2019-3-6', //开始日期
endDate:'2019-5-15', //结束日期
todayBtn:true, //今日按钮
clearBtn:true, //清空按钮
daysOfWeekdisabled:'1', //禁用，高亮度显示
daysOfWeekHighlighted:"0.6",
multidate:true, //多选
multidateSeparator:",",
autoclose:true, //自动关闭
todayHighlight:true //今日高亮
});
});
</script>效果:
文档： https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#inline-or-embedded
二、颜色插件
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-colorpicker/3.0.0-beta.3/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-colorpicker/3.0.0-beta.3/js/bootstrap-colorpicker.js"></script>
<style type="text/css">
body{
padding: 50px;
}
.color{
width: 200px;
}
.input-group-addon i{
display: inline-block;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<!--input-group 输入框组-->
<div class="input-group color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
<input type="text" class="form-control" size="16" value="" >
<span class="input-group-addon add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(".color").colorpicker();
})
</script>效果：
单击颜色改变
<body>
<!--input-group 输入框组-->
<div class="input-group color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
<input type="text" class="form-control" size="16" value="">
<span class="input-group-addon add-on"><i></i></span>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$(".color").colorpicker().on("changeColor", function(e) {
//alert('aaa');
//将选中的颜色设置成背景色
$('body')[0].style.backgroundColor = e.color.toHex();
});;
});
</script>效果：
