一、引入文件

bootstrap的版本號是個很令人頭大的問題，這里提供一下我使用的版本號

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"> <!-- 下面這個很重要，沒有這個文件，很多圖標顯示不出來 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" > <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <!-- 下面是個時間插件 --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <!-- 網上很多人都沒說要下面這個文件，引入這個文件，可以將英文轉成中文 --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script> <script src="https://cdn.bootcdn.net/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.com/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日期时间选择器插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。