如何使用bootstrap实现年月日的时间选择


本文摘自PHP中文网,作者(*-*)浩,侵删。

下面介绍如何使用bootstrap实现年月日的时间选择

使用bootstrap实现时间选择,页面需要加载以下文件:(推荐学习: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

btime-1.png使用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配置代码如下:

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>

实现的效果如下:

btime-2.png

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

以上就是如何使用bootstrap实现年月日的时间选择的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap有react版吗

bootstrap 模态框用法

bootstrap如何设置div边框

bootstrap如何设置表格单选按钮

bootstrap置信区间如何求

浅谈bootstraptable+jstree插件对树列表条件和查询条件的处理

bootstrap特点是什么意思

bootstrap为什么是12列

有必要学bootstrap

bootstrap如何兼容ie6

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...