插件描述：bootstrap-daterangepicker - 基于 Bootstrap 框架的日期范围选择控件
这个日期范围选择器组件引导创建一个下拉菜单，用户可以选择一个日期范围。如果没有选择调用时，它将呈现出两个日历从选择开始日期和结束日期。或者，你可以提供一系列的日期范围，用户可以从相反的选择从日历上的日期选择。如果连接到一个文本输入，选择的日期将插入文本框。否则，你可以接受的选择提供一个自定义回调函数。构件也可以被用来作为通过设置singledatepicker选择单个日期选择器
相关插件-日期和时间
日期和时间
日期和时间
日期和时间
日期和时间
讨论这个项目（12）回答他人问题或分享插件使用方法奖励jQ币
年怎么是0003？
为什么用single date picker时，年份会是用0000开始呢？
_??╊遗趋 0
请问下怎么将当前日期之前的日期不能选择呢
-仅此而已0
你解决了吗？
你解决了吗
怎么能出现小时和分钟呢
ヤ媛。o吖い 0
请问怎么显示单选时间框带小时的那种啊~~~
lhl_ainiyanger 0
请问能支持中文吗？
下载文件已经修改为中文版。
表格内容为中文时，导出成word会报错。望修复o(*￣?￣*)o
回复错地方了。。。
PROMULGATOR
陕西省西安市
关注作者 (500)
收藏此插件 (69)
我当前jQ币余额：正在获取..
已下载次数：7176
所需jQ币：0问题：bootstrap中日历控件datepicker无法显示
报错 $(...).datepicker is not a function
一直出现这个问题，导致日历控件点不出来 &!-- Jquery 插件 --&
&script type="text/javascript" src="${pageContext.request.contextPath}/include/javascript/jquery/jquery-1.11.3.min.js"&&/script&
&!-- 如果要使用 Bootstrap 的js插件,则必须引入 jQuery --&
&script type="text/javascript" src="${pageContext.request.contextPath}/include/bootstrap-3.3.4/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="${pageContext.request.contextPath}/include/bootstrap-3.3.4/docs/assets/js/docs.min.js"&&/script&
&script type="text/javascript" src="${pageContext.request.contextPath}/include/bootstrap-3.3.4/plugins/select/js/bootstrap-select.min.js"&&/script&
&!-- 载入bootstrap 日历插件 --&
&script type="text/javascript" src="../include/bootstrap-3.3.4/plugins/datepicker/js/bootstrap-datepicker.min.js"&&/script&
&script type="text/javascript" src="../include/bootstrap-3.3.4/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"&&/script&
&link rel="stylesheet" type="text/css" href="../include/bootstrap-3.3.4/plugins/datepicker/css/bootstrap-datepicker.min.css" /&
&script type="text/javascript"&
$(function(){
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
todayBtn: "linked",
language: "zh-CN",
autoclose: true
解决方案1:是不是js引用顺序问题，把js引用到页面下面试试解决方案2:看下类名是不是写错了啊解决方案3:把$function 去掉解决方案4:
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
todayBtn: "linked",
language: "zh-CN",
autoclose: true
这么写试试解决方案5:解决方案6:/link?url=GlONaHbCHRPQfoGbmJ3CO6CnfFxe2c0ipisUBmVrWRg6dMEhY-sorh2V2NVoZuFmqne5OxhL6bRX44SXnSWnsajL9Ht2A4gQWIOFX9exnAq解决方案7:引入了两个jQuery，所以无法识别
以上介绍了“bootstrap中日历控件datepicker无法显示”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/wd/594321.html
上一篇： 下一篇：bootstrap关于日期控件被模态框遮盖的BUG修复
时间： 15:47:15
&&&& 阅读：4386
&&&& 评论：
&&&& 收藏：0
标签：bootstrap关于日期控件被模态框遮盖的BUG修复
在使用bootstrap-datepicker.js插件的时候，由于是在模态框中填写日期值，而模态框的值把日期控件遮盖在下面了，导致无法填写日期值。如下图所示：
其本质原因是：当我们点击日期控件填写日期时，bootstrap-datepicker.js帮我们动态生成了class为datepicker dropdown-menu的div，其中包括日期控件中的由年月日等构成的div，而dropdown-menu样式是在bootstrap.css中定义的，其样式为：
.dropdown-menu {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
注：本文使用的bootstrap版本为3.2.2
由于模态框的z-index值比日期控件的dropdown-menu的z-index值要大，所以其隐藏在模态框下面了，因此我们只需修改dropdown-menu的z-index值为10000即可，修改后即可正常显示了，如下图：
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！安全检查中...
请打开浏览器的javascript，然后刷新浏览器
< 浏览器安全检查中...
还剩 5 秒&BootStrap中Datepicker控件带中文的js文件
当前位置： >
> BootStrap中Datepicker控件带中文的js文件BootStrap中Datepicker控件带中文的js文件更新：&&&&编辑：元丹&&&&来源：原创投稿&&&&人气：加载中...&&&&字号：|标签：&&&&&&&&&&
bootstrap-datepicker 是一个非常优秀的光阴选择插件，默认是英文显示日期的。本文给大家介绍bootstrap datepicker带的js。
//用之前引用bootstrap的jsif ($(".datepicker").length & 0) {
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: true,//清除按钮
todayBtn: true,//今日按钮
format: "yyyy-mm-dd"//日期款式
以下是datepicker的css和js代码
* Datepicker for Bootstrap
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
.datepicker {
padding: 4
margin-top: 1
-webkit-border-radius: 4
-moz-border-radius: 4
border-radius: 4
border-top: 1px solid #ddd !
.datepicker:before {
content: '';
display: inline-
border-left: 7
border-right: 7
border-bottom: 7px solid #
border-bottom-color: rgba(0, 0, 0, 0.2);
.datepicker:after {
content: '';
display: inline-
border-left: 6
border-right: 6
border-bottom: 6px solid #
.datepicker & div {
.datepicker table {
width: 100%;
margin: 0;
.datepicker td,
.datepicker th {
text-align:
height: 20
-webkit-border-radius: 4
-moz-border-radius: 4
border-radius: 4
.datepicker td.day:hover {
background: #
.datepicker td.day.disabled {
.datepicker td.old,
.datepicker td.new {
color: #999999;
.datepicker td.active,
.datepicker td.active:hover {
background-color: #006
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0044
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active:focus,
.datepicker td.active:hover:focus,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled] {
background-color: #0044
*background-color: #003bb3;
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active {
background-color: #;
.datepicker td span {
height: 54
line-height: 54
-webkit-border-radius: 4
-moz-border-radius: 4
border-radius: 4
.datepicker td span:hover {
background: #
.datepicker td span.active {
background-color: #006
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0044
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] {
background-color: #0044
*background-color: #003bb3;
.datepicker td span.active:active,
.datepicker td span.active.active {
background-color: #;
.datepicker td span.old {
color: #999999;
.datepicker th.switch {
width: 145
.datepicker th.next,
.datepicker th.prev {
font-size: 21
.datepicker thead tr:first-child th {
.datepicker thead tr:first-child th:hover {
background: #
.input-append.date .add-on i,
.input-prepend.date .add-on i {
height: 16
/* =========================================================
* bootstrap-datepicker.js
* =========================================================
* Copyright 2012 Stefan Petre
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
// Picker object
var Datepicker = function(element, options){
this.element = $(element);
this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || 'yyyy-mm-dd');
this.picker = $(DPGlobal.template)
.appendTo('body')
click: $.proxy(this.click, this)//,
//mousedown: $.proxy(this.mousedown, this)
this.isInput = this.element.is('input');
ponent = this.element.is('.date') ? this.element.find('.add-on') :
if (this.isInput) {
this.element.on({
focus: $.proxy(this.show, this),
//blur: $.proxy(this.hide, this),
keyup: $.proxy(this.update, this)
if (ponent){
ponent.on('click', $.proxy(this.show, this));
this.element.on('click', $.proxy(this.show, this));
this.minViewMode = options.minViewMode||this.element.data('date-minviewmode')||0;
if (typeof this.minViewMode === 'string') {
switch (this.minViewMode) {
case 'months':
this.minViewMode = 1;
case 'years':
this.minViewMode = 2;
this.minViewMode = 0;
this.viewMode = options.viewMode||this.element.data('date-viewmode')||0;
if (typeof this.viewMode === 'string') {
switch (this.viewMode) {
case 'months':
this.viewMode = 1;
case 'years':
this.viewMode = 2;
this.viewMode = 0;
this.startViewMode = this.viewM
this.weekStart = options.weekStart||this.element.data('date-weekstart')||0;
this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
this.onRender = options.onR
this.fillDow();
this.fillMonths();
this.update();
this.showMode();
Datepicker.prototype = {
constructor: Datepicker,
show: function(e) {
this.picker.show();
this.height = ponent ? ponent.outerHeight() : this.element.outerHeight();
this.place();
$(window).on('resize', $.proxy(this.place, this));
e.stopPropagation();
e.preventDefault();
if (!this.isInput) {
var that =
$(document).on('mousedown', function(ev){
if ($(ev.target).closest('.datepicker').length == 0) {
that.hide();
this.element.trigger({
type: 'show',
date: this.date
hide: function(){
this.picker.hide();
$(window).off('resize', this.place);
this.viewMode = this.startViewM
this.showMode();
if (!this.isInput) {
$(document).off('mousedown', this.hide);
//this.set();
this.element.trigger({
type: 'hide',
date: this.date
set: function() {
var formated = DPGlobal.formatDate(this.date, this.format);
if (!this.isInput) {
if (ponent){
this.element.find('input').prop('value', formated);
this.element.data('date', formated);
this.element.prop('value', formated);
setValue: function(newDate) {
if (typeof newDate === 'string') {
this.date = DPGlobal.parseDate(newDate, this.format);
this.date = new Date(newDate);
this.set();
this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
this.fill();
place: function(){
var offset = ponent ? ponent.offset() : this.element.offset();
this.picker.css({
top: offset.top + this.height,
left: offset.left
update: function(newDate){
this.date = DPGlobal.parseDate(
typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),
this.format
this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
this.fill();
fillDow: function(){
var dowCnt = this.weekS
var html = '&tr&';
while (dowCnt & this.weekStart + 7) {
html += '&th&'+DPGlobal.dates.daysMin[(dowCnt++)%7]+'&/th&';
html += '&/tr&';
this.picker.find('.datepicker-days thead').append(html);
fillMonths: function(){
var html = '';
while (i & 12) {
html += '&span&'+DPGlobal.dates.monthsShort[i++]+'&/span&';
this.picker.find('.datepicker-months td').append(html);
fill: function() {
var d = new Date(this.viewDate),
year = d.getFullYear(),
month = d.getMonth(),
currentDate = this.date.valueOf();
this.picker.find('.datepicker-days th:eq(1)')
.text(DPGlobal.dates.months[month]+' '+year);
var prevMonth = new Date(year, month-1, 28,0,0,0,0),
day = DPGlobal.getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
prevMonth.setDate(day);
prevMonth.setDate(day - (prevMonth.getDay() - this.weekStart + 7)%7);
var nextMonth = new Date(prevMonth);
nextMonth.setDate(nextMonth.getDate() + 42);
nextMonth = nextMonth.valueOf();
var html = [];
var clsName,
while(prevMonth.valueOf() & nextMonth) {
if (prevMonth.getDay() === this.weekStart) {
html.push('&tr&');
clsName = this.onRender(prevMonth);
prevY = prevMonth.getFullYear();
prevM = prevMonth.getMonth();
if ((prevM & month && prevY === year) || prevY & year) {
clsName += ' old';
} else if ((prevM & month && prevY === year) || prevY & year) {
clsName += ' new';
if (prevMonth.valueOf() === currentDate) {
clsName += ' active';
html.push('&td&'+prevMonth.getDate() + '&/td&');
if (prevMonth.getDay() === this.weekEnd) {
html.push('&/tr&');
prevMonth.setDate(prevMonth.getDate()+1);
this.picker.find('.datepicker-days tbody').empty().append(html.join(''));
var currentYear = this.date.getFullYear();
var months = this.picker.find('.datepicker-months')
.find('th:eq(1)')
.text(year)
.find('span').removeClass('active');
if (currentYear === year) {
months.eq(this.date.getMonth()).addClass('active');
html = '';
year = parseInt(year/10, 10) * 10;
var yearCont = this.picker.find('.datepicker-years')
.find('th:eq(1)')
.text(year + '-' + (year + 9))
.find('td');
year -= 1;
for (var i = -1; i & 11; i++) {
html += '&span&'+year+'&/span&';
year += 1;
yearCont.html(html);
click: function(e) {
e.stopPropagation();
e.preventDefault();
var target = $(e.target).closest('span, td, th');
if (target.length === 1) {
switch(target[0].nodeName.toLowerCase()) {
case 'th':
switch(target[0].className) {
case 'switch':
this.showMode(1);
case 'prev':
case 'next':
this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
this.viewDate,
this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) +
DPGlobal.modes[this.viewMode].navStep * (target[0].className === 'prev' ? -1 : 1)
this.fill();
this.set();
case 'span':
if (target.is('.month')) {
var month = target.parent().find('span').index(target);
this.viewDate.setMonth(month);
var year = parseInt(target.text(), 10)||0;
this.viewDate.setFullYear(year);
if (this.viewMode !== 0) {
this.date = new Date(this.viewDate);
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
this.showMode(-1);
this.fill();
this.set();
case 'td':
if (target.is('.day') && !target.is('.disabled')){
var day = parseInt(target.text(), 10)||1;
var month = this.viewDate.getMonth();
if (target.is('.old')) {
month -= 1;
} else if (target.is('.new')) {
month += 1;
var year = this.viewDate.getFullYear();
this.date = new Date(year, month, day,0,0,0,0);
this.viewDate = new Date(year, month, Math.min(28, day),0,0,0,0);
this.fill();
this.set();
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
mousedown: function(e){
e.stopPropagation();
e.preventDefault();
showMode: function(dir) {
if (dir) {
this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
this.picker.find('&div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
$.fn.datepicker = function ( option, val ) {
return this.each(function () {
var $this = $(this),
data = $this.data('datepicker'),
options = typeof option === 'object' &&
if (!data) {
$this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options))));
if (typeof option === 'string') data[option](val);
$.fn.datepicker.defaults = {
onRender: function(date) {
return '';
$.fn.datepicker.Constructor = D
var DPGlobal = {
clsName: 'days',
navFnc: 'Month',
navStep: 1
clsName: 'months',
navFnc: 'FullYear',
navStep: 1
clsName: 'years',
navFnc: 'FullYear',
navStep: 10
days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
isLeapYear: function (year) {
return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
getDaysInMonth: function (year, month) {
return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
parseFormat: function(format){
var separator = format.match(/[.\/\-\s].*?/),
parts = format.split(/\W+/);
if (!separator || !parts || parts.length === 0){
throw new Error("Invalid date format.");
return {separator: separator, parts: parts};
parseDate: function(date, format) {
var parts = date.split(format.separator),
date = new Date(),
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
if (parts.length === format.parts.length) {
var year = date.getFullYear(), day = date.getDate(), month = date.getMonth();
for (var i=0, cnt = format.parts. i & i++) {
val = parseInt(parts[i], 10)||1;
switch(format.parts[i]) {
case 'dd':
date.setDate(val);
case 'mm':
month = val - 1;
date.setMonth(val - 1);
case 'yy':
year = 2000 +
date.setFullYear(2000 + val);
case 'yyyy':
date.setFullYear(val);
date = new Date(year, month, day, 0 ,0 ,0);
formatDate: function(date, format){
var val = {
d: date.getDate(),
m: date.getMonth() + 1,
yy: date.getFullYear().toString().substring(2),
yyyy: date.getFullYear()
val.dd = (val.d & 10 ? '0' : '') + val.d;
val.mm = (val.m & 10 ? '0' : '') + val.m;
var date = [];
for (var i=0, cnt = format.parts. i & i++) {
date.push(val[format.parts[i]]);
return date.join(format.separator);
headTemplate: '&thead&'+
'&th&&&/th&'+
'&th colspan="5"&&/th&'+
'&th&&&/th&'+
'&/thead&',
contTemplate: '&tbody&&tr&&td colspan="7"&&/td&&/tr&&/tbody&'
DPGlobal.template = '&div&'+
'&table&'+
DPGlobal.headTemplate+
'&tbody&&/tbody&'+
'&/table&'+
'&table&'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
'&/table&'+
'&table&'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
'&/table&'+
}( window.jQuery );
以上所述是给大家介绍的中Datepicker带的js文件，愿望对大家有所，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家的支持！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
分类选择您可能在找这些帮设计师节省1,085,543,232小时
