Bootstrap之日期和时间表单组件

短命女 2022-04-23 05:38 206阅读 0赞

### 一.前言 ###

Bootstrap的日期时间控件，使用起来很简单,主要功能包括:  
1.支持日期选择，格式设定  
2.支持时间选择  
3.支持时间段选择控制  
4.支持中文  
官方文档地址:[http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm][http_www.bootcss.com_p_bootstrap-datetimepicker_index.htm]

### 二.实例 ###

##### 1.效果截图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]

##### 2.功能代码 #####

**1.css与js组件**

<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />
        <script src="moment-with-locales.js"></script>
        <script src="bootstrap-datetimepicker.min.js"></script>
        <script src="bootstrap-datetimepicker.zh-CN.js"></script>

如果需要资源下载,到 [https://download.csdn.net/download/u010520146/10935700][https_download.csdn.net_download_u010520146_10935700]  
**2.页面展示**

<body>
        <div style="margin: 20px">
            <form class="form-inline">
                <div class="form-group">
                    <input type="text" id="datetimepicker"  class="form-control"  placeholder="请选择日期">
                </div>
                <button type="button"  class="btn btn-primary">确认</button>
                <button onclick="show()" type="button"  class="btn btn-primary">显示</button>
                <button onclick="hide()" type="button"  class="btn btn-primary">隐藏</button>
                <button onclick="update()" type="button"  class="btn btn-primary">更新</button>
                <button onclick="remove()" type="button"  class="btn btn-primary">移除</button>
            </form>
        </div>
    
    </body>

**3.js代码**

<script>
        //使用当前输入框中的值更新日期时间选择器。
        function update(){ 
            $('#datetimepicker').datetimepicker('update');
        }
        //显示日期时间选择器。
        function show(){ 
            $('#datetimepicker').datetimepicker('show');
        }
    
        //移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。
        function remove(){ 
            $('#datetimepicker').datetimepicker('remove');
        }
    
        //隐藏日期时间选择器。
        function hide(){ 
            $('#datetimepicker').datetimepicker('hide');
        }
    
        $('#datetimepicker').datetimepicker({ 
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),
            todayBtn: true,//显示今日按钮
            autoclose: true,//选中自动关闭
            locale: moment.locale('zh-cn')
        });
    </script>

[http_www.bootcss.com_p_bootstrap-datetimepicker_index.htm]: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]: /images/20220323/5a519e9e6d5b4d73a5de87238853728f.png
[https_download.csdn.net_download_u010520146_10935700]: https://download.csdn.net/download/u010520146/10935700

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 颜色和日期插件

BootCDN加速器： [https://www.bootcdn.cn/][https_www.bootcdn.cn] [![watermark_type_ZmFuZ3poZ

悠悠/ 2023年10月18日 17:13/ 0 赞/ 150 阅读

相关 Bootstrap框架（组件）

目录前言一，组件 1.1，字体图标 1.2，下拉菜单组件

迈不过友情╰/ 2023年10月14日 08:32/ 0 赞/ 20 阅读

相关 BootStrap 教程之布局组件（03）

布局组件的实现主要是通过 JS 代码实现的。常见的引用文件是：bootstrap.min.css、jquery.min.js 和 bootstrap.min.js。

￡神魔★判官ぃ/ 2022年09月25日 04:22/ 0 赞/ 166 阅读

相关 bootstrap-datetimepicker bootstrap选择日期

引用bootstrap-datetimepicker的css和js <div id="datetimepicker2" class="input-append">

淩亂°似流年/ 2022年08月05日 00:48/ 0 赞/ 264 阅读

相关 Bootstrap:表单和图片

表单 -------------------- > 1.基本格式：实现基本的表单样式 <form> <div class="form-grou

痛定思痛。/ 2022年06月13日 14:37/ 0 赞/ 236 阅读

相关 Bootstrap输入框和导航组件

输入框组件 > 文本输入框就是可以在input元素前后加上文字或按钮，可以实现对表单控件的扩展  <div class="i

我就是我/ 2022年06月12日 04:46/ 0 赞/ 212 阅读

相关 Bootstrap日期和时间表单组件datetimepicker的使用

1：把项目下载到本地：下载地址：http://www.bootcss.com/p/bootstrap-datetimepicker/ 2：提取文件把datetimep

电玩女神/ 2022年06月06日 07:18/ 0 赞/ 364 阅读

相关 Bootstrap之日期和时间表单组件

一.前言 Bootstrap的日期时间控件，使用起来很简单,主要功能包括: 1.支持日期选择，格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持

短命女/ 2022年04月23日 05:38/ 0 赞/ 207 阅读

相关 BootStrap_03 组件

BootStrap组件图标 .glyphicon .glyphicon-start <button class="btn btn-default" >

柔光的暖阳◎/ 2022年04月04日 10:28/ 0 赞/ 212 阅读

相关 bootstrap-daterangepicker：最好用的日期范围选择组件

嗯，在我还没有发现bootstrap-daterangepicker组件时，在页面需要选择日期范围时，我是傻乎乎的创建两个日期组件。现在想想，以前的low劲真是不可

红太狼/ 2021年05月10日 11:18/ 0 赞/ 596 阅读