日期时间选择器(开始时间-结束时间)

资源库:https://pan.baidu.com/s/1N7WhR_NmGFsxKilXgJfCUg

<!-- 日期Daterange picker -->
<link href="/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />

	<input class="form-control" type="text" value="" id="starttime" readonly> 				
	<input class="form-control" type="text" value="" id="expirationDate" readonly> 
	
<!-- 日期控件 -->
<script src="/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.js"></script>
<script src='/hqt/static/plugin/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js'></script>
<script>
	$('#starttime').datetimepicker({
		format : 'yyyy-mm-dd hh:ii',
		language : 'zh-CN',
		weekStart : 1,
		todayBtn : 1,
		autoclose : 1,
		todayHighlight : 1,
		startView : 2,//日期时间选择器打开之后首先显示的视图。 可接受的值://0 分钟视图;1小时
		minView : 0, //日期时间选择器所能够提供的最精确的时间选择视图
		minuteStep:1,//分钟
		formatViewType : 'time'
	}).on('hide', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var startTime = event.date;
		$("#expirationDate").datetimepicker('setStartDate',startTime);
		$("#expirationDate").val("");
	});

	$('#expirationDate').datetimepicker({
		format : 'yyyy-mm-dd hh:ii',
		language : 'zh-CN',
		weekStart : 1,
		todayBtn : 1,
		autoclose : 1,
		todayHighlight : 1,
		startView : 2,//日期时间选择器打开之后首先显示的视图。 可接受的值://0 分钟视图;1小时
		minView : 0, //日期时间选择器所能够提供的最精确的时间选择视图
		minuteStep:1,//分钟
		formatViewType : 'time'
	}).on('hide', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var endTime = event.date;
		$("#startDate").datetimepicker('setEndDate',endTime);
	});
</script>

猜你喜欢

转载自blog.csdn.net/weixin_42388648/article/details/83501609