美文网首页
bootstrap-datetimepicker 使用教程

bootstrap-datetimepicker 使用教程

作者: JancyCC | 来源:发表于2022-08-12 17:05 被阅读0次

    bootstrap-datetimepicker 使用教程
    bootstrap-datetimepicker是bootstrap的一款日期时间选择器
    官方文档地址:http://www.bootcss.com/p/bootstrap-datetimepicker/
    bootstrap-datetimepicker 在网上虽然有很多教程,但很多都是无效的,所以写下了这篇文章

    1. 引入css和js
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <!-- 时间选择器前置脚本 -->
          
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
    
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    

    jquery版本:可选用 1.8.3 到 3.3.1
    bootstrap版本:选用v3的,使用v4,样式会不出来,v2未试

    1. 前端代码
    <div class="col-sm-6">
        <input type="text" id="datetime" />
    </div>
    

    控制器的外层,需要有一个相对定位的标签,否则会报错

    1. js配置
    <script>
        $("#datetime").datetimepicker();
    </script>
    
    1. 扩展
      4.1 修改时间显示格式
    <script>
        $("#datetime").datetimepicker({
            format: 'YYYY-MM-DD HH:mm'
        });
    </script>
    
    格式字符串   说明  示例
    d   星期几 4
    dd  星期几 Th
    ddd 三个字符的星期几缩写  Thu
    dddd    完整的星期几名称    Thursday
    D   一位数或两位数的天数  4
    DD  两位数的天数  04
    h   12 小时格式的一位数或两位数小时数  1
    hh  12 小时格式的两位数小时数 0    01
    H   24 小时格式的一位数或两位数小时数  13
    HH  24 小时格式的两位数小时数  13
    m   一位数或两位数分钟值  4
    mm  两位数分钟值  04
    M   一位数或两位数月份值  9
    MM  两位数月份值  09
    MMM 三个字符的月份缩写   Sep
    MMMM    完整的月份名  September
    s   一位数或两位数秒数   1
    ss  两位数秒数   01
    Y   完整的年份   2018
    YY  年份的最后两位数    18
    YYYY    完整的年份   2018
    

    4.2 中文

    <script>
        $("#datetime").datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-CN')
        });
    </script>
    

    4.3 其他

    <script>
        $("#datetime").datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-CN'),
            minDate: false, // 最小日期,如'2018/08/15',则14号及14号前的日期都不可选
            maxDate: false, // 最大日期,同'minDate'
        });
    </script>
    
    1. 下载
      https://github.com/kosmos1991/datetimepicker
      ————————————————
      版权声明:本文为CSDN博主「kosmos1991」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
      原文链接:https://blog.csdn.net/qq_31267183/article/details/82457883

    相关文章

      网友评论

          本文标题:bootstrap-datetimepicker 使用教程

          本文链接:https://www.haomeiwen.com/subject/dpffgrtx.html