网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件.

http://www.jq22.com/jquery-info1087     这是双日历插件下载地址,demo里面有介绍需要引入那些js和css文件.

1.直接进入到js实例化部分:

 function timePicker(){
var option={
locale:{
fromLabel: '开始日期',
toLabel: '结束日期'
},
maxDate:new Date(new Date().getFullYear()+'-'+(new Date().getMonth()+)+'-'+(new Date().getDate()+)),//双日历允许最大的结束日期
opens:'left',//日历与输入框的对其方式,当前为右对齐
//maxDate:moment(),//设置成moment(),有一个bug,那就是不能选择今天(比如2016-7-21)
//dateLimit:{//起止时间允许的范围
// days:30
//},
showDropdowns : true//这个属性可以实现下拉选择年份
};
$('#calenderAccount').daterangepicker(option);
setTimeout(function () { $('#calenderImg').click(function (e) {
if(e.stopPropagation()){
e.stopPropagation();
}else if(e.cancelBubble){
e.cancelBubble=true
}
$('#calenderAccount').trigger('click')
});
$('.clearInputTime').click(function () {//实现清空的功能
$('#calenderAccount').val('');
$('#startTime').val('');
$('#endTime').val('');
$('.cancelBtn ').trigger('click')
})
},);
}

2.由于配置参数里面并没有清空按钮,但是项目为了实现这一个功能,所以自己在源码里面添加了一行,增加了一个清空按钮:

 var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +

             '<div class="ranges">' +
'<div class="range_inputs">' +
'<div class="daterangepicker_start_input">' +
'<label for="daterangepicker_start"></label>' +
'<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
'</div>' +
'<div class="daterangepicker_end_input">' +
'<label for="daterangepicker_end"></label>' +
'<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
'</div>' +
'<button class="applyBtn" disabled="disabled"></button>&nbsp;' +
'<button class="cancelBtn btnDone"></button>' +
'<button class="clearInputTime" style="float: right;margin-right: 10px">清空</button>' +
'</div>' +
'</div>' +
'<div class="clear"></div>' +
'<div class="calendar left"></div>' +
'<div class="calendar right"></div>' +
'</div>';

最终的效果如下图:

点击上方的input框,会弹出双日历选择器,选择了日期之后,需要点击确定,输入框内才会有值,如果需要清空输入框的值,只需要再次激活日历选择器,点击清空即可

更多详细参数请参考:

http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

或者参考源码:daterangepicker.js里面的下列代码:

setOptions: function(options, callback) {

            this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.minDate = false;
this.maxDate = false;
this.dateLimit = false; this.showDropdowns = false;
this.showWeekNumbers = false;
this.timePicker = false;
this.timePickerIncrement = 30;
this.timePicker12Hour = true;
this.singleDatePicker = false;
this.ranges = {}; this.opens = 'right';
if (this.element.hasClass('pull-right'))
this.opens = 'left'; this.buttonClasses = ['btn', 'btn-small'];
this.applyClass = 'btn-success';
this.cancelClass = 'btn-default'; this.format = 'YYYY-MM-DD';
this.separator = ' - '; this.locale = {
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment()._lang._weekdaysMin.slice(),
monthNames: moment()._lang._monthsShort.slice(),
firstDay: 0
};

bootstrap双日历插件实例化的更多相关文章

  1. daterangepicker双日历插件的使用

    今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下: 个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文 ...

  2. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  3. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  4. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  5. Twitter Bootstrap JavaScript插件

    Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...

  6. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  8. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  9. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

随机推荐

  1. DBCP数据源连接池实现原理分析

    前些天在调试公司系统的时候发现这样的一个问题:mysql数据库服务停止一段时间后再次重启后吗,tomcat服务无法请求数据库服务,调试了半天对这个问题进行定位解决,期间也搞了很多有关mysql数据库的 ...

  2. Linux下SVN客户端安装及使用

    转载自:http://www.linuxidc.com/Linux/2015-01/111748.htm 不想自己写了,这个写的挺全的,我就按这个步骤走的,呵呵 非常感谢作者 环境说明: 系统版本:C ...

  3. spring boot 学习笔记(二) 构建web支持jsp

    一.必须将项目打包成war包 <packaging>war</packaging> 二.pom.xml加入依赖包 <dependency> <groupId& ...

  4. java多线程详解(7)-线程池的使用

    在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, 这样频繁创建线程就会大大降低系 ...

  5. 空MVC项目找不到System.Web.Optimization的处理办法

    install-package Microsoft.AspNet.Web.Optimization Create the bundle in Global.asax Application_Start ...

  6. myeclipse的web project中使用dom4j报错java.lang.ClassNotFoundException: org.dom4j.Document

    在学习微信公众平台开发的过程中,参考了微信公众平台java开发详解(工程代码+解析)中的xml解析方法,是使用dom4j来解析的. 对于java中解析xml的方法,又参考了java解析xml的几种方式 ...

  7. Spring @RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    背景 昨天一个人瞎倒腾spring boot,然后遇到了一点问题,所以把这个问题总结一下. 主要讲解request 数据到handler method 参数数据的绑定,所用到的注解和什么情形下使用. ...

  8. AngularJs自定义指令详解(10) - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  9. sql2000 (附加数据库)错误9003:LSN(434:94:1)无效和数据库置疑处理

    由于工作需要更换公司的服务器,于是经过一堆的动作,转移网页,转移数据……正当一切都有序进行,却卡在数据库这里,一般为了方便我对数据库的备份都是复制数据库文件的,再通过附加方法实现的,今天由于发现数据库 ...

  10. Maven之自定义archetype生成项目骨架(一)

      Maven之自定义archetype生成项目骨架(一) 标签: mavennexus插件 2015-07-15 16:40 2443人阅读 评论(0) 收藏 举报  分类: Maven技术(9)  ...