• 认真地记录技术中遇到的坑!

bootstrap常用插件使用方法

前端 悠悠 6个月前 (05-01) 241次浏览 0个评论

本文记录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());

Bootstrap datetimepicker插件使用

介绍

Bootstrap日期+时间选择控件。

Git地址:https://github.com/Eonasdan/bootstrap-datetimepicker

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

官方文档和Demo地址:http://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap select插件使用

介绍

Bootstrap选择下拉框控件,支持多选。

Git地址:https://github.com/silviomoreto/bootstrap-select

官方地址:http://silviomoreto.github.io/bootstrap-select/

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

官方Demo地址:http://silviomoreto.github.io/bootstrap-select/examples/

官方文档地址:http://silviomoreto.github.io/bootstrap-select/options/


转载请注明出处 bootstrap常用插件使用方法
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址