Bootstrap 颜色和日期插件

悠悠 2023-10-18 17:13 129阅读 0赞

**BootCDN加速器： [https://www.bootcdn.cn/][https_www.bootcdn.cn]**

[![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]][https_www.bootcdn.cn]

**查找日期插件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

**单击就能看到对应的版本哦！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

具体使用如下：

<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-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>
    		
           <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>

效果:

![20190416154613295.png][]

<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>

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

文档： [https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html\#inline-or-embedded][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>
    
    
    <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>

效果：

![20190416161918239.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]

**单击颜色改变**

<body>
    
    		
    		<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>

效果：

![20190416162026242.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5][]

[https_www.bootcdn.cn]: https://www.bootcdn.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190416154144865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190416154325338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190416154344323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190416154613295.png]: https://img-blog.csdnimg.cn/20190416154613295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190416154747432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[https_bootstrap-datepicker.readthedocs.io_en_latest_markup.html_inline-or-embedded]: https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#inline-or-embedded
[20190416161918239.png]: https://img-blog.csdnimg.cn/20190416161918239.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190416161929231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190416162026242.png]: https://img-blog.csdnimg.cn/20190416162026242.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190416162013382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70