bootstrap datepicker限定可选时间范围实现方法

一、应用场景

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

如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选择器动态的设置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中，声明日期选择器

<span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">
<div class="form-inline">
<div class="form-group cy-mar-ver-s">
<span class="cy-pad-hor-s">最后接入时间</span>
</div>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="form-control" name="start" id="qBeginTime" />
<span class="input-group-addon">至</span>
<input type="text" class="form-control" name="end" id="qEndTime" />
</div>
<div class="form-group cy-mar-ver-s">
<button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button>
</div>
</div>
</div></span>

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

<span style="font-size:14px;"> //开始时间：
$('#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);
});</span>

3、效果图

以上所述是小编给大家介绍的bootstrap datepicker限定可选时间范围实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS控件bootstrap datepicker使用方法详解

    JS控件bootstrap datepicker使用方法详解

    bootstrap-datepicker沙箱环境: bootstrap-datepicker沙箱环境: 1.requirejs配置 requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 urlArgs:'v=2016110701', paths: { jquery: ["../../plugins/jquery/jquery

  • bootstrap datepicker插件默认英文修改为中文

    bootstrap datepicker插件默认英文修改为中文

    datepicker插件默认为英文,而且格式为:mm/dd/yyyy这种情况,看起来不怎么直观. 修改目标: 1.默认显示为中文 2.格式为:yyyy年mm月dd日 需要修改两个地方: 1.更改datas对象, 增加zh-cn语言选项:参见源代码的1419行 var dates = $.fn.datepicker.dates = { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesd

  • Bootstrap datepicker日期选择器插件使用详解

    Bootstrap datepicker日期选择器插件使用详解

    bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以. datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中.因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包. 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&

  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把

  • BootStrap Datepicker 插件修改为默认中文的实现方法

    BootStrap Datepicker 插件修改为默认中文的实现方法

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文 1.首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存 2.增加 cn 语言选项 var dates = $.fn.datepicker.dates = { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesday"

  • BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的.本文给大家介绍bootstrap datepicker带中文的js文件. //用之前引用bootstrap的jsif ($(".datepicker").length > 0) { $(".datepicker").datepicker({ language: "zh-CN", autoclose: true,//选中之后自动隐藏日期选择框 cle

  • BootStrap的Datepicker控件使用心得分享

    2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能! 公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单.今天遇到要使用它的datepicker这个控件. 问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后.于是一顿研究,从上午研究到3点才解决问题. 总结了一下问题所在.主要原因是项目里用的jquery

  • 浅谈Bootstrap的DatePicker日期范围选择

    用日期插件时,经常会有一种需求.两个input框选择.开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间. 我们当然可以用选择的结果来判断输入正确与否.但是更好的办法是让我们的日期选择插件做出一些限制. Bootstrap搭配了很优秀的日期选择插件.DatePicker和DateTimePicker. 两者功能很类似.使用方法也是差不多的.DatePicker支持更多的事件和设置. 看api知道日期变化的时候会有一个事件changeDate.当选择的日期变化的时候,会

  • bootstrap datepicker限定可选时间范围实现方法

    bootstrap datepicker限定可选时间范围实现方法

    一.应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值. 二.相关知识点 1.bootstrap-datepicker的初始化 引入bootstrap-datepicker.js和bootstrap-datepicker.css bootstrap-datepicker配置参数的了解 2.boostra

  • Antd中单个DatePicker限定时间输入范围操作

    1.某个时间段 import React from 'react'; import moment from 'moment'; class DateDemo extends React.Component{ disabledDate = (current) => { return current < moment().startOf('day') || current > moment().add(6, 'day') ; }; datePickerChange = (date) =>

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • BootStrap扔进Django里的方法详解

    BootStrap扔进Django里的方法详解

    因为django的版本差异化比较大,所以以下配置仅供学习参考. D:\www\mysite>python --version Python 2.7.5 >>> print django.__version__ 1.9.4 本记录不作细说,主要配置过程如下: 1.settings.py最后一段,关于静态文件的配置 # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto

  • BootStrap select2 动态改变值的方法

    1,selec2动态赋值 var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" }); $("#e_pid").attr("value", tempP); $("#e_pid").select2({ placeholder: "查找停车场名称(多选)", language: "zh-CN", minimumInp

  • Bootstrap模态框调用功能实现方法

    Bootstrap模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • BootStrap使用file-input插件上传图片的方法

    BootStrap使用file-input插件上传图片的方法

    最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 首先根据自己的项目路径引入插件css和js文件 注意locale语言文件在fileinput.min.js文件之后引入 <!-- file input --> <link href="../../css/fileinput.min.css"

随机推荐