bootstrap4日期选择器插件tempusdominus-bootstrap-4具体实例

先上图

代码

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