运用bootstrap的时间控件,生成时间选择器。

1.截图:有以下这些样式

10年视图        年视图         月视图         日视图         小时视图

2.视图设计:

1).年视图代码:

<div class="container">
<input class="form_datetime form-control" type="text" value="" size="16">
</div>
/*样式头*/
<link rel="stylesheet" href="../../css/bootstrap.min.css" media="screen">
<link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
/*js代码*/ <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "yyyy-mm",
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文,需要引用zh-CN.js包
startView: 3,//月视图
minView: 4//日期时间选择器所能够提供的最精确的时间选择视图
});

3.附加几个自己测试过的笔友的分享:

Bootstrap日期/日历插件Datepicker 时间加标记:http://www.cnblogs.com/chenche/archive/2013/09/27/3342155.html

bootstrap datepicker只选择年份: https://zhidao.baidu.com/question/433308979477858884.html

Bootstrap日期和时间表单组件:http://www.bootcss.com/p/bootstrap-datetimepicker/

手册地址:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate

4.PS:文章写的潦草,如有需要交流请加qq:2318645572

Bootstrap中时间(时间控件)的设计的更多相关文章

  1. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

  2. bootstrap中使用日历控件

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

  3. 今天使用bootstrap中的tagsinput控件,碰到个小问题

    我直接使用时,后台一直报Uncaught Can't add objects when itemValue option is not set错误, 代码如下: <div> <inp ...

  4. WPF Timeline简易时间轴控件的实现

    原文:WPF Timeline简易时间轴控件的实现 效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定T ...

  5. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  6. SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework

    一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...

  7. 老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件

    ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...

  8. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...

  9. mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  10. WPF 时间编辑控件的实现(TimeEditer)

    一.前言 有个项目需要用到时间编辑控件,在大量搜索无果后只能自己自定义一个了.MFC中倒是有这个控件,叫CDateTimeCtrl.大概是这个样子: 二.要实现的功能 要实现的功能包含: 编辑时.分. ...

随机推荐

  1. 智能DNS

    DNS查找下一个服务的地址   一.智能DNS APP通过域名访问DNS服务器,DNS根据域名对应一组IP中随机选择一个,发给APP.从这个意义说智能DNS,智能DNS相当一个七层的负载均衡. 二.H ...

  2. Spring Boot 快速入门(Eclipse)

    步骤一:关于版本(前期工作) JDK 1.8 maven 3.5 配置环境变量: 步骤二:创建项目 首先新建个maven项目(SpringBoot 应用,本质上是一个Java 程序,其采用的风格是 m ...

  3. Pandas缺失数据

    数据丢失(缺失)在现实生活中总是一个问题. 机器学习和数据挖掘等领域由于数据缺失导致的数据质量差,在模型预测的准确性上面临着严重的问题. 在这些领域,缺失值处理是使模型更加准确和有效的重点. 何时以及 ...

  4. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  5. sql内连接外连接自然连接

    为什么我们要使用内连接和外连接呢?可以从两张或者多张表中找出,我们需要的属性. 这个比较好:http://www.cnblogs.com/youzhangjin/archive/2009/05/22/ ...

  6. ORACLE TO_CHAR,TO_DATE函数格式说明

    YEAR,年份的英文全称 YYYY:四位表示的年份 YYY,YY,Y:年份的最后三位.两位或一位,缺省为当前世纪 MM:01~12的月份编号 MONTH:九个字符表示的月份,右边用空格填补 MON:三 ...

  7. elasticsearch负载均衡节点——客户端节点 node.master: false node.data: false 其他配置和master 数据节点一样

    elasticSearch的配置文件中有2个参数:node.master和node.data.这两个参 数搭配使用时,能够帮助提供服务器性能. 数据节点node.master: false node. ...

  8. .NET中 数据库连接

    (转自:http://www.iwms.net/n459c12.aspx) SQL Server ODBC  Standard Security:"Driver={SQL Server};S ...

  9. Android 中Activity,Window和View之间的关系

    转自:http://hi.baidu.com/xiaofanqing/blog/item/8261ac114ab14f64cb80c435.html 我这里根据我个人的理解来讲讲我个人对这3个概念的理 ...

  10. UI- 不易记知识点汇总

    1.static: 所有的全局变量都是静态变量,而局部变量只有定义时加上类型修饰符static,才为局部静态变量. 静态变量并不是说其就不能改变值,不能改变值的量叫常量. 其拥有的值是可变的 ,而且它 ...