bootstrap-datetimepicker 时间控件的简单实用

1.引包

<link rel="stylesheet" href="../lib/css/conmon.css">

<link rel="stylesheet" href="../lib/css/bootstrap.min.css">

<link rel="stylesheet" href="../lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">

<script src="../lib/js/jquery-2.1.4.min.js"></script>

<script src="../lib/js/bootstrap.min.js"></script>

<script src="../lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

<script src="../lib/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

2 页面结构

<input type="text" value="" id="datetimepicker">  年月日

<input type="text" value="" id="datetimepicker1">年月

<input type="text" value="" id="datetimepicker2">年

3.调用方法

$(‘#datetimepicker‘).datetimepicker({

format:‘yyyy-mm-dd‘,

autoclose:true,//自动关闭

minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

});

$(‘#datetimepicker1‘).datetimepicker({

format:‘yyyy-mm‘,

autoclose:true,//自动关闭

minView:3,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

startView:3,

language:‘zh-CN‘

});

$(‘#datetimepicker2‘).datetimepicker({

format:‘yyyy‘,

autoclose:true,//自动关闭

minView:4,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

startView:4

});

简单实用, http://www.cnblogs.com/benyu-aimao/p/4095583.html

时间: 2024-08-04 03:38:24

bootstrap-datetimepicker 时间控件的简单实用的相关文章

bootstrap datetimepicker 时间控件的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><link href="static/bootstrap-datetimepicker-master/sample-in-bootstrap-v2/bootstrap/css/bootstr

datetimepicker 时间控件 1899年问题以及解决方法

bootstrap-datetimepicker时间控件显示问题,显示1899年. 案例回顾: 第一次页面加载完点击时间控件,显示正常. 第二次点击的时候,发现显示为1899年 原因调查:结果发现日期格式化的代码出错了 这类问题可以去读一下bootstrap-datetimepicker的源代码,我们会发现它的日期format格式里面没有上述的这种日期格式,也就导致了日期控件选择时间后无法格式化导致内部异常出现了1899年这样的滑稽bug. 解决方案有2个, 一是直接修改format: 'yyy

网格控件的简单实用

一,新建一个BCG工程CBCGPGridCtrlSingle,基于对话框. 二,CCBCGPGridCtrlSingleDlg类定义变量. CBCGPGridCtrl m_grid; 三,CCBCGPGridCtrlSingleDlg::OnInitDialog对网格控件进行初始化. CRect r(0,0,200,200); m_grid.Create(WS_CHILD, r, this, 1); m_grid.ShowWindow(SW_SHOW); m_grid.InsertColumn 

datetimepicker时间控件

喜欢上datetimepicker源自于对bootstrap的喜欢. 一款简单到爆的时间空间 引入jq 引入bootstrap 引入datetimepicker和bootstrap-datetimepicker.zh-CN语言包 库文件 密码:c9m5 官网:http://www.bootcss.com/p/bootstrap-datetimepicker/ 简单实例两个,和这里有关系,是动态拿取本地时间的呢.看这里 //time时间插件 $('#datetimepicker').datetim

时间控件My97简单用法

my97的用法很是简单,项目中用到,查了资料才找到的,简单使用,记一下,方便查阅. 1.添加依赖. <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>注意的是,不能单单的引入WdatePicker.js,要把整个My97DatePicker因进去. 2.使用最简单,这是官网dem

EChart 关于图标控件的简单实用

1.下载前段框架并放入项目中去. 2.在js中调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!--Step:1 Prepare a dom for ECharts which (must) has siz

bootstrap 时间控件

最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了 需要引入的css和js:(文件引入路径根据自己的项目而定) <link href="<c:url value='/plugins/bootstrap-datetimepicker/css/datetimepicker.css'/>" rel="stylesheet&qu

Bootstrap中时间(时间控件)的设计

运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图        年视图         月视图         日视图         小时视图 2.视图设计: 1).年视图代码: <div class="container"> <input class="form_datetime form-control" type="text" value="" size=&qu

关于bootstrap时间控件datetimepicker的位置错乱问题

最近遇到datetimepicker这个时间控件在加载到网页显示时会发生错乱,具体解决如下: 1.首先我的源代码是从网站下载的:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 采用的源码是:sample in bootstrap v2文件夹下的: 2.考虑到位置错乱问题应该是在 js文件中,通过查找最终确定在bootstrap-datetimepicker.js中的问题:     应将其中的place:代码修改如下: plac