您的位置:首页 > Web前端 > JQuery

jquery日历组件,时间组件应用

2015-12-09 17:05 696 查看
<div class="input-group" >
<input class="form-control date-picker" id="id-date-picker-1" name="starttime" style="border-width: 1px;" placeholder="开始时间"
type="text" data-date-format="yyyy-mm-dd"> <span
class="input-group-addon"> <i
class="fa fa-calendar bigger-110"></i>
</span>
</div>
<div class="input-group">
<input class="form-control date-picker" id="id-date-picker-1" name="endtime" style="border-width: 1px;" placeholder="结束时间"
type="text" data-date-format="yyyy-mm-dd"> <span
class="input-group-addon"> <i
class="fa fa-calendar bigger-110"></i>
</span>
</div>
需要引用以下js组件
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/bootstrap.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/bootstrap-datepicker.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/bootstrap-timepicker.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/moment.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/locales/moment-with-locales.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/bootstrap-datetimepicker.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>
<span style="white-space:pre">	</span><script
<span style="white-space:pre">		</span>src="${requestContext.contextPath}/resources/ace/assets/js/date-time/daterangepicker.js"></script>

//初始化日历组件,这行代码必须要加入
<span style="white-space:pre">	<script type="text/javascript">

$('.date-picker').datepicker({
<span style="white-space:pre">	</span>language : 'zh-CN',
<span style="white-space:pre">	</span>autoclose : true,
<span style="white-space:pre">	</span>todayHighlight : true,
<span style="white-space:pre">	</span>weekStart : 1
}).next().on(ace.click_event, function() {
<span style="white-space:pre">	</span>$(this).prev().focus();
});
</script></span>
需要引入以下css
<link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/datepicker.css" /><link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/bootstrap-timepicker.css" /><link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/bootstrap-datetimepicker.css" /><link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/daterangepicker.css" /><link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/bootstrap-multiselect.css" /><link rel="stylesheet"<span style="white-space:pre">	</span>href="${requestContext.contextPath}/resources/ace/assets/css/bootstrap-duallistbox.css" />

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: