先上图
代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>日期选择器</title>
<meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
http-equiv="x-ua-compatible" >
<link href="css/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
<link href="css/tempusdominus-bootstrap-4.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
</div>
</div>
</div>
<script src="js/jquery-3.4.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/moment-with-locales.js" type="text/javascript"></script>
<script src="js/tempusdominus-bootstrap-4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//ajax请求
$(function(){
//日期
$('#datetimepicker5').datetimepicker({
format: 'YYYY/MM/DD',//日期格式
autoclose: true,//Boolean. 默认值:false。当选择一个日期之后是否立即关闭此日期时间选择器。
viewMode: 'days',
buttons: {
showToday: true,
showClear: true,
showClose: true
},
icons: {
today: 'fa fa-caret-square-o-right',
clear: 'fa fa-trash-o',
close: 'fa fa-close'
},
tooltips:{
today: '今天',
clear: '清除',
close: '关闭',
selectMonth: '选择月份',
prevMonth: '上个月',
nextMonth: '下个月',
selectYear: '选择年份',
prevYear: '上一年',
nextYear: '下一年',
selectDecade: '选择时期',
prevDecade: '上个年代',
nextDecade: '下个年代',
prevCentury: '上个世纪',
nextCentury: '下个世纪',
incrementHour: '增加一小时',
pickHour: '选择小时',
decrementHour:'减少一小时',
incrementMinute: '增加一分钟',
pickMinute: '选择分',
decrementMinute:'减少一分钟',
incrementSecond: '增加一秒',
pickSecond: '选择秒',
decrementSecond:'减少一秒'
},//这会将tooltips每个图标上方的内容更改为自定义字符串。
locale: 'zh-cn'
});
});
</script>
</body>
</html>
能看懂吗?直接拿过去试试,如果你的不行,一定是细节有问题。比如,css,js的引用。jquery代码的配置。
如果还不行,
请移步bootstrap4日期插件tempusdominus的API:https://tempusdominus.github.io/bootstrap-4/Options/#icons
moment-with-locales.js直接搜就可以官网下载。
说一下这里面比较重要的组件,
buttons: {
showToday: true,
showClear: true,
showClose: true
},
更改选择器功能的默认工具栏按钮。选择今天,清除选择,关闭视图。
配套有
icons: {
today: 'fa fa-caret-square-o-right',
clear: 'fa fa-trash-o',
close: 'fa fa-close'
},组件
给按钮添加图标,我随便选了两个,可以去fontawesome图标库:http://fontawesome.dashgame.com/自己选
还有
tooltips:{
today: '今天',
clear: '清除',
close: '关闭',
selectMonth: '选择月份',
prevMonth: '上个月',
nextMonth: '下个月',
selectYear: '选择年份',
prevYear: '上一年',
nextYear: '下一年',
selectDecade: '选择时期',
prevDecade: '上个年代',
nextDecade: '下个年代',
prevCentury: '上个世纪',
nextCentury: '下个世纪',
incrementHour: '增加一小时',
pickHour: '选择小时',
decrementHour:'减少一小时',
incrementMinute: '增加一分钟',
pickMinute: '选择分',
decrementMinute:'减少一分钟',
incrementSecond: '增加一秒',
pickSecond: '选择秒',
decrementSecond:'减少一秒'
},
组件,选择放上去的文字,
tooltips
每个图标上方的内容更改为自定义字符串。
像这种,鼠标放上去会显示的字符串。
很容易明白吧。
注意:为什么要用这个插件而不用bootstrap-datetimepicker呢,是因为这是针对bootstrap4的,bootstrap4使用bootstrap-datetimepicker图标等会丢失,图标是bootstrap3的,bootstrap4去掉了部分收费的图标,所以为了避免这些麻烦,推荐使用这个。