本文摘自PHP中文网,作者爱喝马黛茶的安东尼,侵删。
使用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配置代码如下:
1 2 3 4 5 6 7 8 9 | <script type= "text/javascript" >
$( '.form_datetime' ).datetimepicker({
language: 'zh-CN' ,
minView: 4, format: 'yyyy' ,
startDate:2019,
autoclose: 1,
startView: 4,
});
</script>
|
实现的效果如下:
使用bootstrap实现月份的选择
bootstrap配置代码如下:
1 2 3 4 5 6 7 8 9 10 11 | <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配置代码如下:
1 2 3 4 5 6 7 8 9 10 11 | <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配置代码如下:
1 2 3 4 5 6 7 8 9 10 | <script type= "text/javascript" >
$( '.form_datetime' ).datetimepicker({
format: 'yyyymmdd' ,
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
language: 'zh-CN'
});
</script>
|
实现的效果如下:
使用bootstrap实现年月日时分秒的选择
bootstrap配置代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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配置代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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实现年月日的时间选择器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap是哪家开发的
bootstrap如何解决浏览器兼容性
bootstrap如何去掉遮罩层
解决bootstrap只加载一次 remote 数据的问题
bootstrap字体图标怎么引用
bootstrap如何隐藏div
bootstrap实现简单侧边导航栏效果
bootstrap模态框如何提交表单
bootstrap tab 没有反应怎么办
bootstrap remote用法是什么
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用bootstrap实现年月日的时间选择器