datetimepicker常用方法

来源：互联网发布：python 高斯函数编辑：程序博客网时间：2024/06/11 07:03

1、首先引用资源包；

bootstrap基础资源包： bootstrap.min.css 、bootstrap-responsive.min.css、style.css、jquery-1.10.1.min.js、

datetimepicker资源包： bootstrap-datetimepicker.min.css、bootstrap-datetimepicker.min.js、bootstrap-datetimepicker.zh-CN.js

2、jsp页面

<div class="portlet">
<div class="portlet-body form">
<form class="pull-right no-margin form-inline" style="float:left; width:100%">
<div style="margin-bottom: 10px;">

<label class="control-label">推送任务:</label>
<select style="height: 30px !important;" id="taskId" name="taskId" class="small m-wrap" >
<option value="-1" selected>--请选择--</option>
<c:forEach items="${pushStrategies }" var="pushStrategyVo" >
<option value="${pushStrategyVo.id}">${pushStrategyVo.name}</option>
</c:forEach>
</select>
<label class="control-label">点击时间:</label>
<input size="16" data-format="yyyy-mm-dd" id="pushTimeBegin" type="text" >
<label class="control-label">至</label>
<input size="16" data-format="yyyy-mm-dd" id="pushTimeEnd" type="text" >
<button type="button" id="searchButton" class="btn blue">
<i class="icon-search"></i> 搜索
</button>
</div>
</form>
</div>
</div>

3.js代码

$("#pushTimeBegin").datetimepicker({
format: 'yyyy-mm-dd',
minView: "month",
language: 'zh-CN', //汉化
autoclose:true //选择日期后自动关闭
}).on('changeDate',function(ev){
var pushTimeBegin = $("#pushTimeBegin").val();
$("#pushTimeEnd").datetimepicker('setStartDate',pushTimeBegin); //设置结束日期的可选值：不得早于开始时间
$("#pushTimeBegin").datetimepicker('hide');
});
$("#pushTimeEnd").datetimepicker({
format: 'yyyy-mm-dd',
minView: "month",
language: 'zh-CN', //汉化
autoclose:true
});

4、页面效果

开始时间

结束时间

0 0