https://blog.csdn.net/qq_33368846/article/details/82223676

Bootstrap datetimepicker控件的使用

1.支持日期选择，格式设定

2.支持时间选择

3.支持时间段选择控制

4.支持中文

涉及的样式及js:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>datetimpicker测试</title>

    <!--图标样式-->

    <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.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.24.0/moment-with-locales.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>

<body>

<div class="row">

<div class='col-sm-6'>

        <div class="form-group">

            <label>选择日期：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker1'>

                <input type='text' class="form-control" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>

        </div>

    </div>

    <div class='col-sm-6'>

        <div class="form-group">

            <label>选择日期+时间：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker2'>

                <input type='text' class="form-control" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

$(function () {

    $('#datetimepicker1').datetimepicker({

        format: 'YYYY-MM-DD',

        locale: moment.locale('zh-cn')

    });

    $('#datetimepicker2').datetimepicker({

        format: 'YYYY-MM-DD hh:mm',

        locale: moment.locale('zh-cn')

    });

});

</script>

</html>

bootstrap：时间日期日历控件（datetimepicker）的更多相关文章

  1. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  2. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  3. bootstrap-datetimepicker：基于twitter bootstrap的日期/时间选择控件

    bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...

  4. 日历控件datetimepicker（IE11）

    1.安装 smalot.bootstrap-datetimepicker 2.引用 bootstrap.css bootstrap-datetimepicker.min.css jquery-1.10 ...

  5. Android超炫日期日历控件：TimesSquare

    先看效果图: 使用说明: 在布局文件里: <com.squareup.timessquare.CalendarPickerView android:id="@+id/calendar_ ...

  6. js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

    日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https:/ ...

  7. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  8. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  9. bootstrap日历控件

    bootstrap的日历控件: <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet&quo ...

随机推荐

  1. C 利用移位运算符 把十进制转换成二进制

    #include <stdio.h> int main(void){ //利用移位运算符 把十进制转换成二进制 int c; printf("输入数字:");//8 s ...

  2. Sage Math中的语法

    1.赋值后不能立即输出,而需要停顿.x= 3  不能输出显示,而 x= 3; x 可以显示. 2.可以用分号连续书写多行. 3.矩阵可以用 mtx[i, j]引用,但是行列号通常从0开始,维度n, m ...

  3. Hbase监控指标项

    名词解释 JMX:Java Management Extensions,用于用于Java程序扩展监控和管理项 GC:Garbage Collection,垃圾收集,垃圾回收机制 指标项来源 主机名 u ...

  4. Chapter One

    spring-boot-starter-parent spring-boot-starter-parent是一个特殊的Starter,提供了Maven的默认配置,同时还提供了dependency-ma ...

  5. Oracle语法 及 SQL题目（二）

    目录 课例复制 思考题四 解题思路 思考题五 解题思路 课例复制 思考题四 最近,经过你的努力,你得到了一份工作,成为了百货公司的一位经理. 到位后,你发现你的销售数据库中有两张表,一个是商店促销时间 ...

  6. 详解Unity Profiler内存分析问题

    在使用Unity开发游戏的过程中,借助Profiler来分析内存使用状况是至关重要的.但许多开发者可能还对Profiler中各项数据表示的含义不甚明确,今天我们Unity官方的技术工程师柳振东,将针对 ...

  7. fork 可能导致subprocess崩溃

    https://docs.python.org/zh-cn/3/library/multiprocessing.html 在 3.8 版更改: 对于 macOS,spawn 启动方式是默认方式. 因为 ...

  8. QQ 有很多关于会员的标记，腾讯舍不得为每一个标记用 1 个字节 Byte，而用的是 1 比特 Bit。

    17年的实践:腾讯海量产品的技术方法论-其它分享/专项技术区 - 即时通讯开发者社区! http://www.52im.net/thread-159-1-1.html 腾讯QQ1.4亿在线用户的技术挑 ...

  9. Javascript事件派发-dispatchEvent

    事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...

  10. python 设计模式之工厂模式 Factory Pattern (简单工厂模式，工厂方法模式，抽象工厂模式)

    十一回了趟老家,十一前工作一大堆忙成了狗,十一回来后又积累了一大堆又 忙成了狗,今天刚好抽了一点空开始写工厂方法模式 我看了<Head First 设计模式>P109--P133 这25页 ...