bootstrap4日期选择器插件tempusdominus

先上图

代码

日期选择器 //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’ }); });

能看懂吗？直接拿过去试试，如果你的不行，一定是细节有问题。比如，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去掉了部分收费的图标，所以为了避免这些麻烦，推荐使用这个。