Bootstrap中时间(时间控件)的设计
运用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中时间(时间控件)的设计的更多相关文章
- Bootstrap中datetimepicker日期控件1899年问题解决
Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- 今天使用bootstrap中的tagsinput控件,碰到个小问题
我直接使用时,后台一直报Uncaught Can't add objects when itemValue option is not set错误, 代码如下: <div> <inp ...
- WPF Timeline简易时间轴控件的实现
原文:WPF Timeline简易时间轴控件的实现 效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定T ...
- 第32讲 UI组件之 时间日期控件DatePicker和TimePicker
第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置, Time ...
- SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework
一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...
- 老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
- 给easyui datebox时间框控件扩展一个清空的实例
给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...
- mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- WPF 时间编辑控件的实现(TimeEditer)
一.前言 有个项目需要用到时间编辑控件,在大量搜索无果后只能自己自定义一个了.MFC中倒是有这个控件,叫CDateTimeCtrl.大概是这个样子: 二.要实现的功能 要实现的功能包含: 编辑时.分. ...
随机推荐
- shell编程学习笔记--整数自增
在Shell脚本中,用于while或for循环中经常要涉及到整数自增的情况,下面罗列下可能的方式 [方式一]declare -i来声明整数变量 root@localhost:~# declare -i ...
- 修改Maven源为阿里巴巴的镜像
在C:\Users\Administrator\.m2创建setting.xml文件,内容如下 <settings xmlns="http://maven.apache.org/SET ...
- centos7 -lvm卷组
老忘,记一下 基本的逻辑卷管理概念: PV(Physical Volume)- 物理卷 物理卷在逻辑卷管理中处于最底层,它可以是实际物理硬盘上的分区,也可以是整个物理硬盘,也可以是raid设备. ...
- Autofac Getting Started(默认的构造函数注入)
https://autofaccn.readthedocs.io/en/latest/getting-started/index.html The basic pattern for integrat ...
- SSD: Single Shot MultiBox Detector 编译方法总结
SSD是一个基于单网络的目标检测框架,它是基于caffe实现的,所以下面的教程是基于已经编译好的caffe进行编译的. caffe的编译可以参考官网 caffe Installation Instal ...
- ASC和字符转化,整形和String转化
public class ASCTest { public static void main(String[] args) { /* 区别这两种 String s = "123"; ...
- 记一次Configured Capacity: 0 (0 B)的解决
场景 最近hadoop集群新加了一个节点N,通过Ambari管理 一切正常. 过了两天发现,虽然集群每天要进几个G的数据(共8个节点),但节点N占用空间丝毫没有变化,显然没有进数据啊 日志 查看该节点 ...
- 用Heartbeat实现HA集群
HA即高可用(high avaliable),又被叫做双机热备,用于关键性业务,简单理解就是,有两台机器A和B,正常是A提供服务,B待机闲置,当A宕机或服务宕掉,会切换到B机器继续提供服务.常用实现高 ...
- C++ 学习使用
1.C++已经不太建议用#define const用法 定义小函数,不改变内部成员的可以用inline 2.namespace使用 3.C语言预处理 #define这些的使用 #pragma once ...
- CentOS下安装mysql及配置使用
最近一直使用的是CentOS,平时用的最多的数据库是Sql Server,对于mysql还停留在上学的时候,早已忘得一干二净,写这篇内容目的是,重新学习如何安装使用mysql. 一.安装mysql 操 ...