bootstrap-datepicker属性列表
本文梳理了bootstrap-datepicker日期插件40多个属性的使用方法。
属性的使用方法
$("#inputDate").datepicker({
language: 'zh-CN', //设置语言
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式}
);autoclose
用户选择了日期后是否自动关闭弹出层，默认false
$("#inputDate").datepicker(
{
autoclose: true, //选择后自动关闭
format: "yyyy-mm-dd"//日期格式
}
);
assumeNearbyYear
快速输入的一直方式，不大用得到，以下代码为例，用户可以在输入输入22/11/18，插件自动转换成22/11/2018
$("#inputDate").datepicker({
language: 'zh-CN',
autoclose: true,
assumeNearbyYear: true,
format: "dd/mm/yyyy"
});
beforeShowDay
*该属性可以用来自定义某些特殊日期，比如生日、农历节假，函数返回以下对象
*具体用法请点击左边beforeShowDay菜单，包含在线例子
{
enabled:false, //是否可选
classes:'cs-like', //当前日期的样式
tooltip:'www.itxst.com上线的日子', //鼠标提示内容
content:'22' //当前日期单元格显示的内容
}
beforeShowMonth
*该属性可以用来自定义某些特殊月份,函数返回以下对象
*具体用法请点击左边菜单，包含在线例子
{
enabled:false, //是否可选
classes:'cs-like', //当前日期的样式
tooltip:'11月份要加油哦', //鼠标提示内容
}
ShowYear
*该属性可以用来自定义某些特殊年份,函数返回以下对象
*具体用法请点击左边菜单，包含在线例子
{
enabled:false, //是否可选
classes:'cs-like', //当前日期的样式
tooltip:'11月份要加油哦', //鼠标提示内容
}
beforeShowDecade
同上
beforeShowCentury
新段落
calendarWeeks
默认false,是否在左边显示当前属于第几周，比如本周未今年的第20周
clearBtn
默认false,是否显示清除已择日期的按钮
container
你可以指定控件依附在那个元素，默认"body"
datesDisabled
String, Array. Default: []
设置不可选的日期
daysOfWeekDisabled
String, Array. Default: []
设置星期几不能选择，比如设置星期二、星期五不能选择
daysOfWeekHighlighted
String, Array. Default: []
设置星期及高亮，比如设置星期一和星期六高亮可以设置'16'或'1,6'或[1,6]
defaultViewDate
展开日期控件时，默认的日期，以下代码表示默认展开日期为2020年12月15号
$("#inputDate1").datepicker({
language: 'zh-CN', //语言
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
format: "yyyy-mm-dd",//日期格式
defaultViewDate: {
year: 2020,
month: 11, //注意月份是从0开始
day: 15
}
});
disableTouchKeyboard
默认为false，如果设置为true则在移动设备不会显示键盘
enableOnReadonly
如果输入框为只读
<input type="text" readonly="readonly" id="inputDate1" class="form-control" >
那么enableOnReadonly为false将不会触发日期选择控件
$("#inputDate1").datepicker({
enableOnReadonly: false
});
endDate
如果设置endDate为2020-11-11哪用户只能选择2020-11-11及之前的日期
forceParse
当用户输入的日期为不合法时是否强制转换日期，默认为true
format
日期的格式比如yyyy-mm-dd 或者 dd/mm/yyyy
immediateUpdates
当用户点击月份和年份时是否立即刷选选择的时间
inputs
范围选择
<div id="event_period">
<input type="text" placeholder="入住日期"
class="actual_range">
<input type="text" placeholder="退房日期" class="actual_range">
</div>
<script>
$('#event_period').datepicker({
language: 'zh-CN', //语言
clearBtn: true,//清除按钮
format: "yyyy-mm-dd",//日期格式
inputs: $('.actual_range')
});
</script>
keyboardNavigation
默认true，是否开启键盘导航快捷键
language
设置语言，默认'en', 'zh-CN'表示中文简体
maxViewMode
设置用户可以选择模式
设置 0 或 “days”或 “month”用户只能按天选择，无法快速切换月份和年份
设置 1 或 “months” 或 “year”,用户只快速快换月份，但是无法快速切换年份
设置 2 或 “years”或 “decade”,用户可以快速切换年份
设置 3 或 “decades” 或 “century”,用户可以按年代切换
设置 4 或 “centuries” 或 “millenium”，用户可以按世纪切换
minViewMode
用户选择日期的最小单位
设置 0 或 “days”或 “month”可以选择日期
设置 1 或 “months” 或 “year”,可以选择月份不能日期
设置 2 或 “years”或 “decade”,可以选择年份但是不能选择月份和日期
设置 3 或 “decades” 或 “century”,只能选择年代和世纪 (10年为一个年代)
设置 4 或 “centuries” 或 “millenium”，只能选择世纪（100年为一个世纪）
multidate
Boolean, Number. Default: false
是否开启多选模式，默认false,开启后用户可以同时选择多个日期
multidateSeparator
多选模式下的分隔符，默认是","
orientation
控件的停靠位置，默认auto,支持“left” or “right”, “top” or “bottom”, and “auto”
showOnFocus
默认为true,即用户点击输入框触发日期选择控件，如果为false则不触发，需要通过js方法触发显示日期控件
startDate
设置可选日期的最小日期，比如'2020-6-25'那么之前的日期将无法选择
startView
日期控件显示时是先显示日期还是月份或年份
设置 0 或 “days”或 “month”默认值，先显示日期
设置 1 或 “months” 或 “year”,先显示月份，用户先选月份再选日期
设置 2 或 “years”或 “decade”,先显示年份，用户先选年份再选月份最后选日期
设置 3 或 “decades” 或 “century”,用户先年代，再选年份再选月份最后选日期
设置 4 或 “centuries” 或 “millenium”，用户先世纪，再选年代再选年份再选月份最后选日期
templates
日期控件< >上一日期下一日期的模板
默认
{
leftArrow: '«',
rightArrow: '»'
}
showWeekDays
是否再日期控件顶部显示星期几，默认true
title
日期控件的标题
todayBtn
是否显示''今天"按钮默认false,如果设置linked，用户点击今天按钮日期将会导航到当前日期
todayHighlight
当前日期（今天）是否高亮显示，默认false
toggleActive
布尔值。默认值：false
如果为true，则在日期选择器中选择当前活动日期将取消设置相应的日期。使用multidate选项时，此选项始终为true。
updateViewDate
布尔值。默认值：true
是否更新视图，当默认值错误时，比如
startDate:'2020-06-32',6月根本不存在，如果updateViewDate设置为false,那么日期控件依然会显示6月份的视图，如果设置的是true，视图会自动切换到7月份
weekStart
整数，默认值：0
设置星期几开始
zIndexOffset
设置日期控件的css z-index属性