第一步：下载组件 下载地址： bootstrap-datepicker (v1.10.0) - A datepicker for Bootstrap forked from Stefan Petre's (of eyecon.ro), improvements by eternicode | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 中文官方文档： bootstrap-datepicker getUTCDate设置控件日期 - itxst.com 官方网站： bootstrap-datepicker — bootstrap-datepicker documentation 第二步：导入文件 2.1 导入css文件
2.2 导入js文件
第三步：代码实现 里面向相关参数可以
$(function () {
initDatePicker(); // 初始化
});
// 初始化日期选择器
function initDatePicker(){
//找到自己的需要添加日期的标签id
$('#id_start_date,#id_end_date').datepicker({
format: 'yyyy-mm-dd', //格式化
language: 'zh-CN',
autoclose: true, //点击其他地方自动关闭
startDate: '0', //开始时间
todayHighlight: true, // 将当天时间突出显示
})
}
效果展示
相关参数 Markup 标记 input 输入 component 元件 date-range 日期范围 inline or embedded 内联或嵌入式 Options 选项 autoclose 自动关闭 assumeNearbyYear beforeShowDay beforeShowMonth beforeShowYear beforeShowDecade beforeShowDecade（之前显示十年） beforeShowCentury calendarWeeks 日历周 clearBtn container 容器 datesDisabled 日期禁用 daysOfWeekDisabled daysOfWeek禁用 daysOfWeekHighlighted daysOfWeek突出显示 defaultViewDate 默认视图日期 disableTouchKeyboard disableTouch键盘 enableOnReadonly endDate 结束日期 forceParse format 格式 immediateUpdates 即时更新 inputs 输入 keepEmptyValues keyboardNavigation 键盘导航 language 语言 maxViewMode maxView模式 minViewMode minView模式 multidate 多日期 multidateSeparator orientation 取向 showOnFocus startDate 开始日期 startView templates 模板 showWeekDays show平日 title 标题 todayBtn 今天BTN todayHighlight 今日亮点 toggleActive toggle活动 updateViewDate weekStart week开始 zIndexOffset Quick reference 快速参考 Methods 方法 destroy 摧毁 show 显示 hide 隐藏 update 更新 setDate setUTCDate setDates clearDates setUTCDates getDate 获取日期 getUTCDate getDates 获取日期 getUTCDates getStartDate getEndDate setStartDate setEndDate setDatesDisabled setDates已禁用 setDaysOfWeekDisabled setDaysOfWeekHighlightedsetDaysOfWeek突出显示 Events 事件 show 显示 hide 隐藏 clearDate changeDate 更改日期 changeMonth 变化月份 changeYear 变化年份 changeDecade 变化十年 changeCentury 变革世纪 Keyboard support 键盘支持 up, down, left, right arrow keys向上、向下、向左、向右箭头键 enter 进入 escape 逃 I18N I18N型 文档地址： bootstrap-datepicker — 引导日期选择器文档 --- bootstrap-datepicker — bootstrap-datepicker documentation