准备动作先到下载Bootstrap日期和时间组件。
1:引入bootstrap.min.css,因为bootstrap-datetimepicker里面的很多样式依赖bootstarp的主样式,字体文件。
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
2:引入jq库,因为bootstarp基于jq.
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js" charset="UTF-8"></script>
3.引入bootstrap.min.js脚本
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
基本准备就绪,现在开始引入Bootstrap日期和时间表单组件相关文件。
4:引入日期主样式文件bootstrap-datetimepicker.min.css。
<link href="data/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
5:引入日期脚本bootstrap-datetimepicker.js。
<script type="text/javascript" src="data/bootstrap-datetimepicker.js" charset="UTF-8"></script>
6:引入日期翻译bootstrap-datetimepicker.zh-CN.js脚本,这里选择的是中文默认为英文。其他语言在locales文件中。
<script type="text/javascript" src="data/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
相关文件引入就绪,现在开始用日期组件。
7:HTML中指定要运用日期组件的标签
<input class="form-control" type="text" id="datetimepicker">
8:选项
初始化,要放在引入脚本的下面。默认选择值2014-12-30 13:15 ,日期--小时--分
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
language: 'zh-CN',
autoclose: 1,
// format:'yyyy:MM:dd',
// weekStart: 5,
// startDate:'2014:12:15',
// endDate:'2014:12:28',
// startView: 1,
// minView: 2,
// todayBtn:1,
// todayHighlight:1,
// keyboardNavigation:1,
// minuteStep:6,
// showMeridian: 1,
// forceParse: 0
});
</script>
language(设置控件显示语言):
'zh-CN':日期组件的语言为中文;
autoclose(这只选择时间后自动关闭组件):
默认或值为0选择值后都不自动关闭需要点击组件外围关闭组件。1=TRUE;0=FALSE;
format(设置日期格式):
'yyyy:MM:dd':指定显示日期格式 中文默认 yy-MM-dd hh:ii,格式, p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M,