bootstrap常用插件使用方法

本文记录bootstrap的一些常用前端插件的使用方法

bootstrap-datepicker.js使用

介绍

bootstrap日期显示插件。

Git地址：https://github.com/uxsolutions/bootstrap-datepicker

官方CDN列表：http://www.bootcdn.cn/bootstrap-datepicker/

官方文档：https://bootstrap-datepicker.readthedocs.org/en/stable/

官方Demo地址：https://uxsolutions.github.io/bootstrap-datepicker/

引入

<script src="bootstrap-datepicker.css"></script>
<script src="bootstrap-datepicker.js"></script>

<input type="text" class="form-control input-date" readonly="" value="2017-05-02" id="start" name="start">

使用方法

// 中文显示  
 $.fn.datepicker.dates['cn'] = { days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"], monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], today: "今天", clear: "清除" }; // 常用选项 var start_datepicker =$ ('#start').datepicker({
    autoclose: true,          // 自动关闭  
    format: 'yyyy-mm-dd',     // 日期格式
    todayBtn: false,          // 显示今天按钮  
    todayHighlight: false,    // 今天日期高亮 
    clearBtn: false,          // 显示清除按钮 
    forceParse: true,         // 是否强制转换不符合格式的字符串  
    keyboardNavigation: true, // 是否显示箭头导航  
    orientation: "auto",      // 方向 
    language: 'cn',           // 语言
    beforeShowDay:  $.noop, // 在显示日期之前调用的函数 calendarWeeks: false, // 是否显示今年是第几周 daysOfWeekDisabled: [], // 星期几不可选 endDate: Infinity, // 日历结束日期 startDate: -Infinity, // 日历开始日期 startView: 0, // 开始显示 weekStart: 0 // 星期几是开始 }); // 方法调用方式$ ('.datepicker').datepicker('method', arg1, arg2);
// 如下面
$('#start').datepicker('getDates');
start_datepicker.setDates(new Date());