DateTimePicker关于时间区间的设置

来源：互联网发布：数据结构算法笔试题编辑：程序博客网时间：2024/06/05 03:49

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

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

//日期控件初始化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/

转载请标明出处

阅读全文

1 0