最近使用了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" //选择日期后,不会再跳转去选择时分秒 });
下面来看看效果图:
插件下载地址:http://download.csdn.net/detail/javaweiming/8140797
时间: 2024-10-07 22:30:11