一、引入文件
bootstrap的版本号是个很令人头大的问题,这里提供一下我使用的版本号
<link rel="stylesheet" href="https://cdn.bootcdn/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css">
<!-- 下面这个很重要,没有这个文件,很多图标显示不出来 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<script src="https://cdn.bootcdn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- 下面是个时间插件 -->
<script src="https://cdn.bootcdn/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- 网上很多人都没说要下面这个文件,引入这个文件,可以将英文转成中文 -->
<script src="https://cdn.bootcdn/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcdn/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
二、HTML结构
bootstrap4的日期选择器插件有固定的结构
<div class="form-group">
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" id="dateTime">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
三、JS初始化
在js中使用datetimepicker方法来初始化这个插件
<script>
$(function () {
$('#datetimepicker').datetimepicker({
//配置参数
});
});
</script>
四、配置参数
在初始化的方法中配置参数,实现自己想要的效果,我这边列举了一点常用的,详细的官方文档是:https://getdatepicker/5-4/Options/#timezone
<script>
$(function () {
$('#datetimepicker').datetimepicker({
//配置参数
format:false, //配置时间格式
autoclose:true, //选择一个时间后自动关闭选择框
buttons: { //显示哪些按钮
showToday: true,
showClear: true,
showClose: true
},
stepping: 5, //分钟的增减步长
minDate:false, //能选择的最小日期
maxDate:false, //能选择的最大日期
useCurrent:true, //使用当前的日期时间
defaultDate: false, //输入框中默认的日期
collapse: true, //面板折叠,默认true折叠起来
sideBySide: false, //面板平行排列,默认false纵向排列
useStrict: true, //输入的时间使用严格格式
allowMultidate: false, //允许选择多个日期,默认false只能选择一个日期
disabledDates: ['2021/12/4'], //不能使用的日期,默认false都能使用,如果要设置哪些天不能使用,放到一个数组中
enabledDates: false, //只能使用的日期,默认false都能选,如果要设置哪些天能使用,放到一个数组中
tooltips:{ //设置按钮的提示信息
today: '今天',
clear: '清除',
close: '关闭',
selectMonth: '选择月份',
prevMonth: '上个月',
nextMonth: '下个月',
selectYear: '选择年份',
prevYear: '上一年',
nextYear: '下一年',
selectDecade: '选择时期',
selectDate:'选择日期',
selectTime:'选择时间',
prevDecade: '上个年代',
nextDecade: '下个年代',
prevCentury: '上个世纪',
nextCentury: '下个世纪',
incrementHour: '增加一小时',
pickHour: '选择小时',
decrementHour:'减少一小时',
incrementMinute: '增加一分钟',
pickMinute: '选择分',
decrementMinute:'减少一分钟',
incrementSecond: '增加一秒',
pickSecond: '选择秒',
decrementSecond:'减少一秒'
},
locale: 'zh-CN' //中文
});
});
</script>
更多推荐
bootstrap4日期时间选择器插件
发布评论