Bootstrap日期选择器插件bootstrap-datepicker

bootstrap 日期选择器 2017-06-19

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

支持IE9+

演示下载 2819
使用方法

安装

可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。

1
2
3
4
5
6
7
8
# Yarn
yarn add bootstrap-datepicker
 
# NPM
npm install bootstrap-datepicker
 
# Bower
bower install bootstrap-datepicker                   

使用方法

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

1
2
3
4
5
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-datepicker.js"></script>     

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

1
<script type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>                   
HTML结构

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

1
<input data-provide="datepicker">

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

1
2
3
4
5
6
<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>                   
初始化插件

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

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

配置参数

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
$('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
   
});                   

方法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 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'
本文转载请注明出处:http://www.zhuiye.com/detail_62.html
评论区
  • 还没有评论,快来抢沙发吧!