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

Date Range Picker 插件 bootstrap

2016-04-19 08:55 741 查看
<link rel="stylesheet" href="${ctx!}/plugin/daterangepicker/daterangepicker-bs3.css" />

……
//html
<div class="input-prepend input-group col-xs-1" style="float:left;">
<span class="add-on input-group-addon" style="border-radius:0px;">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</span>
<input class="form-control bdr date" style="width: 150px;border-radius:0px;"   type="text" id="commentDate" name="commentDate" value="${commentDate!}" readonly="readonly"   placeholder="评论日期"/>
</div>

……
<script type="text/javascript" src="/plugin/daterangepicker/moment.js"></script>
<script type="text/javascript" src="/plugin/daterangepicker/daterangepicker.js"></script>
//单个日期列表
<script type="text/javascript">
$('.date').daterangepicker({
singleDatePicker: true,
showDropdowns: true
});
//两个并排列表
<script>
$(document).ready(function() {
$('#dateTime').daterangepicker();
});
</script>

//jfinal后台获取
String  commentDate = this.getPara("commentDate");
……
this.setAttr("commentDate", commentDate);

参考链接地址: http://jingyan.baidu.com/article/4dc40848b96ed5c8d846f17f.html[/code] 
                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: