首页 > 其他 > 详细

bootstrap-datetimepicker插件双日期的设置

时间:2017-07-26 16:31:52      阅读:297      评论:0      收藏:0      [点我收藏+]

技术分享

效果:第二个日期控件选中的时间不能小于第一个

1、页面上需要引用

  

css:
<link rel="stylesheet" href="css/bootstrap.min.css" /> //这个也要引入,否则页面样式会出问题 <link rel="stylesheet" href="plugin/css/bootstrap-datetimepicker.css" />

js:
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugin/js/bootstrap-datetimepicker.js"></script>
<script src="plugin/js/bootstrap-datetimepicker.zh-CN.js"></script>

2、直接在input上调用 datetimepicker()

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

效果:

技术分享

js代码:

<script type="text/javascript">
    $("#datetimeStart").datetimepicker({
        format: yyyy-mm-dd,
        minView:month,
        language: zh-CN,
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
    });
    $("#datetimeEnd").datetimepicker({
        format: yyyy-mm-dd,
        minView:month,
        language: zh-CN,
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
    });
</script>

3、组件的方式使用

<label class="labe_l">发货日期:</label>
<div class="clearfix tex_t reset_text">
  <div class="input-append date fl"  id="datetimeStart">
        <input type="text" class="" readonly>
        <span class="add-on"><i class="icon-th"></i></span> 
    </div>
    <span class="to_link">至</span>
    <div class="input-append date fl"  id="datetimeEnd">
         <input type="text" class="" readonly>
         <span class="add-on"><i class="icon-th"></i></span> 
    </div>
</div>

效果:

技术分享

js代码:

<script>
     //日期插件初始化      
     $(#datetimeStart).datetimepicker({
         language:  zh-CN, 
         format:yyyy-mm-dd, 
         weekStart: 1, /*以星期一为一星期开始*/
         todayBtn:  1,
         autoclose: 1, 
         minView:2, /*精确到天*/
         pickerPosition: "bottom-left" 
      }).on("changeDate",function(ev){  //值改变事件
         //选择的日期不能大于第二个日期控件的日期
         if(ev.date){
              $("#datetimeEnd").datetimepicker(setStartDate, new Date(ev.date.valueOf()));
          }else{
              $("#datetimeEnd").datetimepicker(setStartDate,null);
          }
      });
      $(#datetimeEnd).datetimepicker({
           language:  zh-CN, 
           format:yyyy-mm-dd, 
           weekStart: 1, /*以星期一为一星期开始*/
           todayBtn:  1,
           autoclose: 1, 
           minView:2, /*精确到天*/
           pickerPosition: "bottom-left"
        }).on("changeDate",function(ev){
           //选择的日期不能小于第一个日期控件的日期
           if(ev.date){
                $("#datetimeStart").datetimepicker(setEndDate, new Date(ev.date.valueOf()));
           }else{
                $("#datetimeStart").datetimepicker(setEndDate,new Date());
           }
        });         
 </script>

 

bootstrap-datetimepicker插件双日期的设置

原文:http://www.cnblogs.com/dingjiujiu/p/7239948.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!