在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

Bootstrap日期选择器插件bootstrap-datepicker

分类:插件代码 更新时间:2019-03-04 浏览次数:1130

代码简介

bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言,可通过配置参数设置日期选择器,日期范围选择器等,功能非常强大。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. 引入文件

    在页面中引入bootstrap相关文件,jquery和bootstrap-datepicker3.css,以及bootstrap-datepicker.js文件。


    

如果需要使用i18n文件,还需要引入相应的js文件,例如简体中文需要引入bootstrap-datepicker.zh-CN.min.js文件。

type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js">  


2. html


    可以直接在元素上添加data-provide="datepicker"属性直接将它转换为一个日期选择器。如果需要内联的日期选择器,可以使用data-provide="datepicker-inline"。例如:

     data-provide="datepicker">

    如果需要一个容器,可以使用下面的代码:

    
    
        
    
   


3. 初始化插件

    在页面DOM元素加载完毕之后,可以通过datepicker()方法来初始化bootstrap-datepicker日期选择器插件。

    $('.datepicker').datepicker();   


4. 参数配置

  bootstrap-datepicker日期选择器插件可用的参数配置如下

$('input').datepicker({
  assumeNearbyYear:false,
 
  autoclose:false,
 
  // Callback functions
  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

   }); 


5. 方法

    bootstrap-datepicker日期选择器插件可用的API方法有:

// shows the date picker
$('input').datepicker('show');
 
// hides the date picker
$('input').datepicker('hide');
 
// Clear the dates
$('input').datepicker('clearDates');
 
// Destroys the date picker
$('input').datepicker('destroy');
 
// Updates the date picker
$('input').datepicker('update', DATE);
 
// Sets a new date
$('input').datepicker('setDate', DATE);
 
// Sets a new date
$('input').datepicker('setUTCDate', DATE);
 
// Sets an array of dates
$('input').datepicker('setDates', DATE);
 
// Sets an array of UTC dates
$('input').datepicker('setUTCDates', DATE);
 
// Returns a localized date object
$('input').datepicker('getDate');
 
// Returns a list of localized date objects
$('input').datepicker('getDates');
 
// Returns a list of localized date objects
$('input').datepicker('getUTCDates');
 
// Returns the lower date limit on the datepicker
$('input').datepicker('getStartDate');
 
// Returns the upper date limit on the datepicker
$('input').datepicker('getEndDate');
 
// Sets a new lower date limit on the datepicker
$('input').datepicker('setStartDate', DATE);
 
// Sets a new upper date limit on the datepicker
$('input').datepicker('setEndDate', DATE);
 
// Sets the days that should be disabled.
$('input').datepicker('setDatesDisabled', DATE);
 
// Sets the days of week that should be disabled.
$('input').datepicker('setDaysOfWeekDisabled', DATE);
 
// Sets the days of week that should be highlighted
$('input').datepicker('setDaysOfWeekHighlighted', DATE); 


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!