Date Range Picker 插件 bootstrap

最新推荐文章于 2024-08-20 09:02:39 发布

原创最新推荐文章于 2024-08-20 09:02:39 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #插件

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页中使用Daterangepicker插件轻松实现单个日期和日期时间的选择，包括插件的引入、配置及后台获取日期值的方法，并提供实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<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