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. Hadoop 格式化namenode时报错警告:WARN common.Util: Path /data/dfs/name should be specified as a URI in configuration

    格式化namenode时报错警告:WARN common.Util: Path /data/dfs/name should be specified as a URI in configuration ...

  2. YAML_08 handlers触发器

    ansible]# vim adhttp.yml --- - hosts: cache   remote_user: root   tasks:     - copy:         src: /r ...

  3. Ubuntu 系统安装ssh的命令

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"-- ...

  4. (9)打鸡儿教你Vue.js

    样式绑定 设置元素的样式 用 v-bind 来设置样式属性 class 与 style 是 HTML 元素的属性 <div v-bind:class="{ active: isActi ...

  5. 【转】浅析Linux中的零拷贝技术

    本文探讨Linux中主要的几种零拷贝技术以及零拷贝技术适用的场景.为了迅速建立起零拷贝的概念,我们拿一个常用的场景进行引入: 引文## 在写一个服务端程序时(Web Server或者文件服务器),文件 ...

  6. linux protobuf 测试官方例子遇到报错及解决办法。

    测试例子时出现报错如下,在最下面会写出安装流程. -------------------------------------报错----1------------------------------- ...

  7. 两个int类型的数据相加,有可能会出现超出int的表示范围。

    两个int类型的数据相加,有可能会出现超出int的表示范围. /* 移位运算符: <<(左移) 规律:一个操作数进行左移运算的时候,结果就是等于操作数乘以2的n次方,n就是左移 的位数. ...

  8. docker运行puppeteer出现defucnt僵尸进程

    其实这是docker的一个bug,就是在运行前加--init即可,注意这个在mac中没有只在linux上有. docker run --init -d ..... 具体内容参见:https://sta ...

  9. ubuntu之路——day7.1 衡量模型好坏的因素偏差和方差bias&variance 以及在深度学习中的模型优化思路

    Error | 误差 Bias | 偏差 – 衡量准确性 Variance | 方差 – 衡量稳定性 首先我们通常在实际操作中会直接用错误率或者与之对应的准确率来衡量一个模型的好坏,但是更加准确的做法 ...

  10. What are all the possible values for HTTP “Content-Type” header?

    What are all the possible values for HTTP “Content-Type” header? You can find every content type her ...