bootstrap日期和时间选择器怎么用

bootstrap为我们提供了一款十分实用的日期控件，但相对于初学者来说，这款日期控件的用法要比按钮等css样式难上许多。这里小编就为大家介绍一下这款功能强大的日期控件的用法。

工具/原料
bootstrap
Dreamweaver
方法/步骤
首先，我们将这款日期控件下载下来。百度bootstrap日期控件即可。

将下载好的日期控件的css、js引入自己的文件中。
在这里需要引入的文件有：
bootstrap.min.css（含有bootstrap 所有css）
bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）
jquery-1.8.3.min.js（其他版本的jquery也可以）
bootstrap.min.js（含有bootstrap 所有js）
bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）
locales/bootstrap-datetimepicker.fr.js（重要，这里是日期控件初始值）

将所有文件引入完成后，就开始设置日期控件吧。
这是第一种样式。当然，你可以只要input就可以了。

第二种样式，带有重置按钮（用于清空输入框）的组件模版：

i的作用就是两个小图标，若不要可以删去。
最简洁的样式，只有input,点击弹出选择器：


当然，只有这些是无法弹出日期选择器的，还需要js来激活。

这里是最重要的一步，js激活日期选择器！

将这个写在你的页面内，至于参数，一会再介绍。这样就可以激活你的日期选择器了，点击input便可以弹出选择器。

日期选择器的参数设置：
format
weekStart
startDate
endDate
daysOfWeekDisabled
autoclose
startView
minView
maxView
todayBtn
todayHighlight
keyboardNavigation
language
forceParse
minuteStep
pickerPosition
viewSelect
showMeridian
initialDate
这些属性不用全部设置，但有些是必须的，比如format。
这里是小编所使用的一款日期选择器的初始化设置：
$('.date').datetimepicker({
format:yyyy-mm-dd,
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
bootstrap日期选择器的属性非常多，这也给了用户较大的选择性，快去设置你自己的DIY日期选择器吧！

　　Bootstrap-DateTimePicker是基于Bootstrap3的日期-时间选择器控件,允许自定义时间选择器图标，设置图标是否显示，自定义日期显示格式，禁用日期选择器，设置是否禁用日期选择器、时间选择器、分钟选择器、秒选择器，设置日期的数据范围。
　　$.fn.datetimepicker.defaults = {
pickDate: true, //en/disables the date picker
pickTime: true, //en/disables the time picker
useMinutes: true, //en/disables the minutes picker
useSeconds: true, //en/disables the seconds picker
useCurrent: true, //when true, picker will set the value to the current date/time
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date
maxDate: , //set a maximum date (defaults to today +100 years)
showToday: true, //shows the today indicator
language:’en’, //sets language locale
defaultDate:”", //sets a default date, accepts js dates, strings and moment objects
disabledDates:[], //an array of dates that cannot be selected
enabledDates:[], //an array of dates that can be selected
icons = {
time: ‘glyphicon glyphicon-time’,
date: ‘glyphicon glyphicon-calendar’,
up: ‘glyphicon glyphicon-chevron-up’,
down: ‘glyphicon glyphicon-chevron-down’
}
useStrict: false, //use “strict” when validating dates
sideBySide: false, //show the date and time picker side by side
daysOfWeekDisabled:[] //for example use daysOfWeekDisabled: [0,6] to disable weekends
};