jQuery日期选择器插件bootstrap-datepicker.js
bootstrap-datepicker.js介绍
bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言，可通过配置参数设置日期选择器，日期范围选择器等，功能非常强大。
bootstrap-datepicker.js安装
可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。
Yarn
yarn add bootstrap-datepicker
NPM
npm install bootstrap-datepicker
Bower
bower install bootstrap-datepicker
bootstrap-datepicker.js使用方法
- 在页面中引入
bootstrap相关文件，jquery和bootstrap-datepicker3.css，以及bootstrap-datepicker.js文件。
<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>
- 如果需要使用配置文字等，还需要引入相应的
js文件，例如简体中文需要引入bootstrap-datepicker.zh-CN.min.js文件。
<script type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js">script>
- HTML结构
可以直接在元素上添加data-provide="datepicker"属性直接将它转换为一个日期选择器。如果需要内联的日期选择器，可以使用data-provide="datepicker-inline"。例如：
<input data-provide="datepicker">
如果需要一个容器，可以使用下面的代码：
<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日期选择器插件。
$('.datepicker').datepicker();
- 配置参数
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
});
- 方法
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);
bootstrap-datepicker.js使用案例
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap日期选择器插件bootstrap-datepicker|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-datepicker3.css">
head>
<body>
<div class="htmleaf-container">
<div class="container">
<div class="row" style="min-height: 500px;margin-top: 10px;">
<div class="col-md-5">
<h3>请选择一个日期：h3>
<div class="input-group date datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th ">span>
div>
div>
div>
<div class="col-md-4">
<h3>请选择一个日期：h3>
<input data-provide="datepicker">
div>
<div class="col-md-3">
<h3>请选择一个日期：h3>
<input data-provide="datepicker-inline">
div>
div>
div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript">script>
<script>window.jQuery || document.write('