天天看点

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

先上图

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

代码

<!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

每个图标上方的内容更改为自定义字符串。

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

像这种,鼠标放上去会显示的字符串。

很容易明白吧。

注意:为什么要用这个插件而不用bootstrap-datetimepicker呢,是因为这是针对bootstrap4的,bootstrap4使用bootstrap-datetimepicker图标等会丢失,图标是bootstrap3的,bootstrap4去掉了部分收费的图标,所以为了避免这些麻烦,推荐使用这个。