如何使用bootstrap實現年月日的時間選擇

bootstrap是當下比較流行的前端開發框架,功能比較強大,可以實現頁面大部分的效果。下面介紹如何使用bootstrap實現年月日的時間選擇。

工具/原料

代碼下載地址:https://pan.baidu.com/s/1Jj80vcQlmAhgAzyf4YRB9Q 提取碼: sw75

實現步驟

使用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配置代碼如下:

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

實現的效果如下:

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場