Home >Web Front-end >Bootstrap Tutorial >How to use bootstrap to implement a time selector for year, month and day
Using bootstrap to implement time selection, the page needs to load the following files:
1. CSS files: bootstrap.min.css, bootstrap-datetimepicker.min.css
2. JS files: jquery-1.8.3.min.js, bootstrap.min.js, bootstrap-datetimepicker.js, bootstrap-datetimepicker.zh-CN.js
Use bootstrap to implement year selection
The bootstrap configuration code is as follows:
<script type="text/javascript"> $('.form_datetime').datetimepicker({ language: 'zh-CN', minView: 4, format: 'yyyy', startDate:2019, autoclose: 1, startView: 4, }); </script>
The effect achieved is as follows:
Use bootstrap to implement month selection
The bootstrap configuration code is as follows:
<script type="text/javascript"> $('.form_datetime').datetimepicker({ format: 'mm', autoclose:true, startView:3, minView:3, maxView:3, initialDate:new Date(), language:'zh-CN' }); </script>
The effect achieved is as follows:
Related recommendations: "Bootstrap Getting Started Tutorial"
Use bootstrap to select the year and month
The bootstrap configuration code is as follows:
<script type="text/javascript"> $('.form_datetime').datetimepicker({ format: 'mm', autoclose:true, startView:3, minView:3, maxView:3, initialDate:new Date(), language:'zh-CN' }); </script>
The effect achieved is as follows:
Use bootstrap to select the year, month and day
The bootstrap configuration code is as follows :
<script type="text/javascript"> $('.form_datetime').datetimepicker({ format: 'yyyymmdd', weekStart: 1, autoclose: true, startView: 2, minView: 2, language:'zh-CN' }); </script>
The effect achieved is as follows:
Use bootstrap to select the year, month, day, hour, minute and second
The bootstrap configuration code is as follows:
<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>
The effect achieved is as follows:
Use bootstrap to implement hour selection
The bootstrap configuration code is as follows:
<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>
The effect achieved is as follows:
The above is the detailed content of How to use bootstrap to implement a time selector for year, month and day. For more information, please follow other related articles on the PHP Chinese website!