码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 时间控件

时间:2014-11-10 12:04:20      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   时间控件   

        最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用。下面先简单了解下bootstrap的时间控件。

  这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了

  需要引入的css和js:(文件引入路径根据自己的项目而定)

<link href="<c:url value='/plugins/bootstrap-datetimepicker/css/datetimepicker.css'/>"
	rel="stylesheet" type="text/css" />
<link href="<c:url value='/plugins/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet" type="text/css"/>
<script type="text/javascript"
	src="<c:url value='/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.fr.js'/>"></script>
<script src="<c:url value='/plugins/bootstrap/js/bootstrap.min.js'/>" type="text/javascript" ></script>
<script src="<c:url value='/plugins/jquery-1.10.2.min.js'/>" type="text/javascript"></script>

控件和js的调用:

<input id="startDate" size="16" type="text" >
$('#startDate').datetimepicker({
				format : 'yyyy-mm-dd',
				weekStart : 1,
				todayBtn : 1,
				autoclose : 1,
				todayHighlight : 1,
				startView : 2,
				forceParse : 0,
				showMeridian : 1,
				language: 'zh-CN',//汉化
				minView: "month" //选择日期后,不会再跳转去选择时分秒 
			});
下面来看看效果图:

bubuko.com,布布扣

   插件下载地址http://download.csdn.net/detail/javaweiming/8140797

bootstrap 时间控件

标签:bootstrap   时间控件   

原文地址:http://blog.csdn.net/javaweiming/article/details/40978203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!