码迷,mamicode.com
首页 > 其他好文 > 详细

Thymeleaf使用bootstrap及其bootstrap相关插件(二)

时间:2017-11-30 18:05:21      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:microsoft   htm   html   btn   使用   logs   www   href   hid   

接上文http://www.cnblogs.com/conswin/p/7929772.html

接下来bootstrap-datepicker的简单使用。

1、引入添加js 和 css

2、然后是html页面代码,很简单,一个标签即可:

 <div class="rowGroup" >    
                         <label class="col-sm-1 control-label" >开始日期</label>
                         <div class="col-sm-2 ">
                            <div class="input-group"  >
                                <input type="text" class="form-control form_datetime" id="hd_begdate" name="hd_begdate"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
                            </div>
                         </div>
                     </div>
 <div class="rowGroup" >    
                         <label class="col-sm-1 control-label" >结束日期</label>
                         <div class="col-sm-2 ">
                            <div class="input-group"  >
                                <input type="text" class="form-control form_datetime" id="hd_enddate" name="hd_enddate"/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
                            </div>
                         </div>
                     </div>

 

3、在JS文件中初始化,此时还可以设定开始日期不能大于结束日期

          
        $(document).ready(function() {
            
            
            //设定日期选择格式
            $(‘.form_datetime‘).datetimepicker({
                    minView: "month", //选择日期后,不会再跳转去选择时分秒 
                   language:  ‘zh-CN‘,
                   format: ‘yyyy-mm-dd‘,
                   todayBtn: 1,
                   autoclose: 1
            }) .on("click",function(){
//设定日期选择开始日期需要小于结束日期 $("#hd_begdate").datetimepicker("setEndDate",$("#hd_enddate").val()); $("#hd_enddate").datetimepicker("setStartDate",$("#hd_begdate").val());     });

 效果图:技术分享图片

Thymeleaf使用bootstrap及其bootstrap相关插件(二)

标签:microsoft   htm   html   btn   使用   logs   www   href   hid   

原文地址:http://www.cnblogs.com/conswin/p/7930123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!