大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

bootstrap怎么限定日期选择器可选时间范围-创新互联

这篇文章给大家分享的是有关bootstrap怎么限定日期选择器可选时间范围的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联建站成都网站建设定制设计,是成都网站推广公司,为广告推广提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站营销推广热线:13518219792

一、应用场景

实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,

如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

二、相关知识点

1、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置参数的了解

2、boostrap-datepicker的changeDate事件:日期改变时触发

3、bootstrap-datepicker的setEndDate和setStartDate方法

4、详细配置参见官方文档http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

三、应用实例

1、JSP中,声明日期选择器

最后接入时间

2、JS中,对日期选择器进行初始化和配置

                //开始时间:
		$('#qBeginTime').datepicker({
			todayBtn : "linked",
			autoclose : true,
			todayHighlight : true,
			endDate : new Date()
		}).on('changeDate',function(e){
			var startTime = e.date;
			$('#qEndTime').datepicker('setStartDate',startTime);
		});
		//结束时间:
		$('#qEndTime').datepicker({
			todayBtn : "linked",
			autoclose : true,
			todayHighlight : true,
			endDate : new Date()
		}).on('changeDate',function(e){
			var endTime = e.date;
			$('#qBeginTime').datepicker('setEndDate',endTime);
		});

3、效果图

bootstrap怎么限定日期选择器可选时间范围

bootstrap怎么限定日期选择器可选时间范围

感谢各位的阅读!关于bootstrap怎么限定日期选择器可选时间范围就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站栏目:bootstrap怎么限定日期选择器可选时间范围-创新互联
链接URL:http://dzwzjz.com/article/dgpdig.html
在线咨询
服务热线
服务热线:028-86922220
TOP