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

最新推荐文章于 2024-04-26 00:20:48 发布

落魄实习生

最新推荐文章于 2024-04-26 00:20:48 发布

阅读量1k

点赞数

分类专栏：前端

原文链接：https://a-jing.blog.csdn.net/article/details/91491948?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1619600413803_30018&depth_1-utm_source=distribute.pc_relevant_t0.no

版权

前端专栏收录该内容

39 篇文章 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>

落魄实习生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 时间日期日历控件（datetimepicker）

效果图本文转载。原文链接请点击<!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-dat
复制链接

扫一扫