bootstrap 时间日期日历控件（datetimepicker）

蔚落 2023-01-17 09:23 305阅读 0赞

# 效果图 #

[本文转载。原文链接请点击][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
     
    	<head>
    		<meta charset="UTF-8">
    		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    		<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
     
    		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    		<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
    		<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
     
    		<title></title>
    		<style type="text/css">
    			.myrow { 
    				display: flex;
    				flex-direction: row;
    				/*margin-left:1em;*/
    			}
    			
    			.xxxx { 
    				height: 2px;
    				background: #999999;
    				margin-top: 16px;
    				width: 2em;
    				margin-left: 1em;
    				margin-right: 1em;
    			}
    		</style>
    	</head>
     
    	<body>
    		<div class="form-group ">
    			<label for="name">身份证有效期限*</label>
    			<div class="myrow">
     
    				<div class='input-group date' style="width: 14em;" id='datetimepicker1'>
    					<input type='text' class="timeInput form-control" />
    					<span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
    					</span>
    				</div>
    				<div class="xxxx">
     
    				</div>
    				<div class='input-group date' style="width: 14em;" id='datetimepicker2'>
    					<input type='text' class="timeInput form-control" />
    					<span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
    					</span>
    				</div>
    			</div>
    		</div>
    		<script>
    			$(function() { 
    				$('#form1').hide();
    				var picker1 = $('#datetimepicker1').datetimepicker({ 
    					format: 'YYYY-MM-DD',
    					locale: moment.locale('zh-cn'),
    					//minDate: '2016-7-1'
    				});
    				var picker2 = $('#datetimepicker2').datetimepicker({ 
    					format: 'YYYY-MM-DD',
    					locale: moment.locale('zh-cn')
    				});
    				//动态设置最小值
    				picker1.on('dp.change', function(e) { 
    					picker2.data('DateTimePicker').minDate(e.date);
    				});
    				//动态设置最大值
    				picker2.on('dp.change', function(e) { 
    					picker1.data('DateTimePicker').maxDate(e.date);
    				});
    			});
    			$('#datetimepicker1').datetimepicker({ 
    				format: 'YYYY-MM-DD',
    				locale: moment.locale('zh-cn'),
    				defaultDate: "2018-1-1"
    			});
    			$('#datetimepicker2').datetimepicker({ 
    				format: 'YYYY-MM-DD',
    				locale: moment.locale('zh-cn'),
    				defaultDate: "2028-1-1"
    			});
    		</script>
    	</body>
     
    </html>

[Link 1]: https://a-jing.blog.csdn.net/article/details/91491948?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&dist_request_id=1619600413803_30018&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70]: /images/20221021/6ff2eae7af0147b6a9fa5471dd6a88f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70 1]: /images/20221021/fa3e19bbc39a45389fb4f4bd882dee95.png