使用bootstrap實作時間選擇,頁面需要載入以下檔案:
1、CSS檔案:bootstrap.min.css、bootstrap-datetimepicker.min.css
2、JS檔:jquery-1.8.3.min.js、bootstrap.min.js、bootstrap-datetimepicker.js、bootstrap-datetimepicker.zh-CN.js
使用bootstrap實現年份的選擇
bootstrap設定程式碼如下:
<script type="text/javascript"> $('.form_datetime').datetimepicker({ language: 'zh-CN', minView: 4, format: 'yyyy', startDate:2019, autoclose: 1, startView: 4, }); </script>
實現的效果如下:
##使用bootstrap實作月份的選擇
bootstrap設定程式碼如下:<script type="text/javascript"> $('.form_datetime').datetimepicker({ format: 'mm', autoclose:true, startView:3, minView:3, maxView:3, initialDate:new Date(), language:'zh-CN' }); </script>實作的效果如下:
相關推薦:《
bootstrap入門教學
》使用bootstrap實現年月的選擇
bootstrap設定程式碼如下:<script type="text/javascript">
$('.form_datetime').datetimepicker({
format: 'mm',
autoclose:true,
startView:3,
minView:3,
maxView:3,
initialDate:new Date(),
language:'zh-CN'
});
</script>
實現的效果如下:
#使用bootstrap實作年月日的選擇
bootstrap設定程式碼如下:<script type="text/javascript">
$('.form_datetime').datetimepicker({
format: 'yyyymmdd',
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
language:'zh-CN'
});
</script>
實現的效果如下:
#使用bootstrap實現年月日時分秒的選擇
#### bootstrap設定程式碼如下:###<script type="text/javascript"> $('.form_datetime').datetimepicker({ language : 'zh-CN', format : 'yyyy-mm-dd hh:ii:ss', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); </script>###實作的效果如下:###################使用bootstrap實作小時的選擇########## bootstrap設定程式碼如下:###
<script type="text/javascript"> $('.form_datetime').datetimepicker({ language : 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0 }); </script>###實作的效果如下:#############
以上是如何使用bootstrap實現年月日的時間選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!