Bootstrap-datepicker日期时间选择器的常见用法总结

目前,bootstrap有两种日历。datepicker和datetimepicker,后者是前者的拓展。

// bootstrap datetimepicker

//选择年月日的 startView: 2,   minView: 2, format: 'yyyymmdd',
$('#datetimepicker').datetimepicker({
format: 'yyyymmdd',
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
forceParse: false,
language: 'zh-CN'
});

 //选择年月的 startView: 3,   minView: 3, format: 'yyyymm',
$('#datetimepicker').datetimepicker({
format: 'yyyymm',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false,
language: 'zh-CN'
});

 //选择年的     startView: 4,   minView: 4, format: 'yyyy',
$('#datetimepicker').datetimepicker({
format: 'yyyymm',
weekStart: 1,
autoclose: true,
startView: 4,
minView: 4,
forceParse: false,
language: 'zh-CN'
});

// bootstrap datepicker 选择日期
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true, //选中之后自动隐藏日期选择框
clearBtn: true, //清除按钮
todayBtn: true, //今日按钮
format: "yyyy-mm-dd" //日期格式
});


// bootstrap datepicker 选择月份
$('#datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
format: 'yyyy-mm',
todayBtn: false,
viewSelect: 'month',
startView: 'year',
minView: 'year',
maxView: 'year',
minViewMode: 1,
maxViewMode: 3,
showWeekDays: false

});

附datepicker所有参数列表

var defaults = $.fn.datepicker.defaults = {
assumeNearbyYear: false,
autoclose: false,
beforeShowDay: $.noop,
beforeShowMonth: $.noop,
beforeShowYear: $.noop,
beforeShowDecade: $.noop,
beforeShowCentury: $.noop,
calendarWeeks: false,
clearBtn: false,
toggleActive: false,
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
datesDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keepEmptyValues: false,
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
maxViewMode: 4,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
updateViewDate: true,
weekStart: 0,
disableTouchKeyboard: false,
enableOnReadonly: true,
showOnFocus: true,
zIndexOffset: 10,
container: 'body',
immediateUpdates: false,
title: '',
templates: {
leftArrow: '«',
rightArrow: '»'
},
showWeekDays: true
};