运用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. redis安装优化:

    1)内存分配控制: vm.overcommit_memoryredis启动时肯呢个会出现这样的日志: :M Apr ::! Background save may fail under low mem ...

  2. Java多线程基础知识总结笔记

    本篇笔记记录一些在Java多线程编程中常见的关键字,比较简单和基础的就不写太详细了. 一.Thread类(其实也是应用了Runnable接口)和Runnable接口(只有一个run方法,应用该类必须重 ...

  3. 饭卡管理系统学生E-R图

    - 2 - 1.1 可行性分析 1.1.1 项目背景 近年来学生食堂饭卡的使用给高校餐饮管理带来了一次革命, 从结算方式到账户管理, 从卫生便捷到数据统计等,不仅给就餐者带来了方便,也使餐饮结算手段发 ...

  4. MergeSortedArray,合并两个有序的数组

    问题描述:You may assume that nums1 has enough space (size that is greater or equal to m + n) to hold add ...

  5. Pandas数据帧(DataFrame)

    数据帧(DataFrame)是二维数据结构,即数据以行和列的表格方式排列. 数据帧(DataFrame)的功能特点: 潜在的列是不同的类型 大小可变 标记轴(行和列) 可以对行和列执行算术运算 结构体 ...

  6. 一些官方的github地址

    阿里巴巴开源github地址:https://github.com/alibaba 腾讯开源github地址:https://github.com/Tencent 奇虎360github地址:http ...

  7. 从互信息的角度来理解tf-idf

    先介绍tf idf 在一份给定的文件里,词频(term frequency,tf)指的是某一个给定的词语在该文件中出现的频率.这个数字是对词数(term count)的归一化,以防止它偏向长的文件.( ...

  8. ActiveMQ 性能调优

    本章重点 学习普通的性能调优技巧 怎么优化生产者和消费者 调优实例 简介 ActiveMQ 的性能高度依赖于多种不同的因素,包括:网络代理拓扑架构,传输层,底层网络的服务质量和速度,硬件,操作系统和 ...

  9. 十一 web爬虫讲解2—Scrapy框架爬虫—Scrapy使用

    xpath表达式 //x 表示向下查找n层指定标签,如://div 表示查找所有div标签 /x 表示向下查找一层指定的标签 /@x 表示查找指定属性的值,可以连缀如:@id @src [@属性名称= ...

  10. 查看SQLServer的最大连接数

    如何查看SQLServer的最大连接数?相信很多人对个很有兴趣,一下就给出两种方法: 1. 查询服务器属性 默认服务设置为0(表示不受限制). 2. SQL查看最大连接数 这里的32767就是服务器的 ...