DateTimePicker关于时间区间的设置

要求：设置一个时间区间，结束时间小于开始时间。精确到分钟。

下面是对控件初始化在操作，在初始化的过程中就可以对其输入区间进行大小的判断

//日期控件初始化
	function timer() {
		$("#new_start_time").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			todayHighlight : true,
			startDate : 2000 - 1 - 1,
			language : 'zh-CN',
			startView : 2,//月视图
			showMeridian : true,
			pickerPosition : "bottom-left",
			minuteStep : 5
        }).on('changeDate',function(e){  
            var startTime = e.date;  
            $('#new_end_time').datetimepicker('setStartDate',startTime);  
        });
        $("#new_end_time").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			todayHighlight : true,
			startDate : 2000 - 1 - 1,
			language : 'zh-CN',
			startView : 2,//月视图
			showMeridian : true,
			pickerPosition : "bottom-left",
			minuteStep : 5
        }).on('changeDate',function(e){  
            var endTime = e.date;  
            $('#new_start_time').datetimepicker('setEndDate',endTime);  
        });;
	}

效果图如下：

使得开始的时间不会在结束之后。不过最好还是用 bootstrapValidators来对其输入进行表单验证

$(document).ready(function() {
	$('#add_form').bootstrapValidator({
		message : 'This value is not valid',
		feedbackIcons : {
			valid : 'glyphicon glyphicon-ok',
			invalid : 'glyphicon glyphicon-remove',
			validating : 'glyphicon glyphicon-refresh'
		},
		fields : {
			new_start_time : {
				validators : {
					notEmpty : {
						message : '项目预期开始时间不能为空！'
					},
					callback : {
						message : '开始日期不能大于结束日期',
						callback : function(value,validator,$field,options) {
							// var end = $('#new_end_time').val().substr(0,10);
							// var start = value.substr(0,10);
							// return start<end;
							var end = $('#new_end_time').val();
							var start = value;
							return start < end;
						}
					}
				}
			},
			new_end_time : {
				validators : {
						notEmpty : {
							message : '项目预期结束时间不能为空！'
						}
 						callback:{
 							message : '开始日期不能大于结束日期',
 							callback : function(value,validator,$field) {
 								var start = $('#new_start_time').val();
 								var end = value;
 								return start < end;
 							}
 						}
					}
				}
			}
		});
	});

但是上面会出现一个小问题就是

bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验，所以我们需要在使用bootstrap validator和其他插件（bootstrap datetimepicker）的同时，当插件执行完毕后需要调用bootstrap validator重新验证。因此最后的时间字段验证的代码如下：

$("#new_end_time").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			todayHighlight : true,
			startDate : 2000 - 1 - 1,
			language : 'zh-CN',
			startView : 2,//月视图
			showMeridian : true,
			pickerPosition : "bottom-left",
			minuteStep : 5
        }).on('changeDate',function(e){  
            var endTime = $("#new_end_time").val();  
            $('#new_start_time').datetimepicker('setEndDate',endTime);
            $('#add_form').bootstrapValidator('revalidateField', 'new_end_time');
        });

效果如图：

bootstrapValidator验证

时间控件的一些基本操作可以看： http://www.bootcss.com/p/bootstrap-datetimepicker/

bootstrapValidator的简单介绍可以看： http://1000hz.github.io/bootstrap-validator/

转载请标明出处