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. SVN “Previous operation has not finished”

    https://jingyan.baidu.com/article/cbcede0761334902f40b4d31.html 需要运行sqlite3打开.svn下的wc.db数据库文件, sqlit ...

  2. RookeyFrame 自定义数据源 返回统计查询后的视图

    核心:对返回的数据进行重写 功能是这样的:上传淘宝后台的订单文件,将订单文件里面的数据导入到系统,对导入后的订单数据进行统计后再显示. Order_File:用来存上传的订单文件,格式是****.cs ...

  3. Linux中三种SCSI target的介绍之STGT

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/scaleqiao/article/deta ...

  4. mysql 5.7.21, for Linux (i686) 权限配置

    配置权限参数: GRANT语法: GRANT 权限 ON 数据库.* TO 用户名@'登录主机' IDENTIFIED BY '密码' 权限: ALL,ALTER,CREATE,DROP,SELECT ...

  5. Shell脚本之sed的使用

    1.sed命令:主要作用是查找:新增 删除 和修改替换. user.txt daokr#cat user.txt ID Name Sex Age zhang M wang G cheng M huah ...

  6. noi.ac #43 dp计数

    \(sol\) 状态 \[f_{i, dis_1, dis_2, dis_3, dis_4}\] 表示到了第 \(i\) 层,其中 \(dis_{1}\) 表示第一根柱子剩下的最靠上的横木到当前 \( ...

  7. 10分钟教你用python 30行代码搞定简单手写识别！

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 手写笔记还是电子笔记好呢? 毕业季刚结束,眼瞅着2018级小萌新马上就要来了,老腊肉小编为了咱学弟学妹们的学习,绞尽脑汁准备编一套大学秘籍, ...

  8. Struts2.5入门之环境设置

    1. 下载Struts2.5,下载地址 2. 新建项目struts2 3. 解压后将struts\lib下的所有jar包复制到WEB-INF/lib文件夹下 4. 修改web.xml配置文件,添加如下 ...

  9. java连数据库和数据库连接池踩坑日记（一）-------oracle连接的一些问题

    最近接触oracle有点多,同时也在配置数据库连接池,坑也就踩多了,记录下. 事情还没有结束,没时间记录问题,很多事情都忘了,过了国庆再写的话可能就真的全忘了吧……而且不单单是数据库问题,还有一些数据 ...

  10. C# 百度API地址坐标互相转换

    通过C#代码将地址字符串转为经纬度坐标,或者将经纬度转为具体的地址字符串,在不通外网的项目中是有需求的. 具体步骤: 一.创建BaiduMapHelper,用于定义地址信息和请求. public st ...