bootstrap-datepicker中文文档

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: '&laquo;',
   rightArrow: '&raquo;'
}

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属性

Catalog
快速入门 属性 属性列表 beforeShowDay beforeShowMonth beforeShowYear calendarWeeks datesDisabled daysOfWeekDisabled defaultViewDate startDate & endDate format inputs language maxViewMode minViewMode multidate todayHighlight I18N语言 方法 setDaysOfWeekDisabled destroy show hide update setDate setUTCDate getDate getUTCDate clearDates setStartDate setEndDate setDatesDisabled setDaysOfWeekHighlighted 事件 show hide clearDate changeDate changeMonth changeYear changeDecade changeCentury