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

bootstrap-datetimepicker插件双日期的设置

时间:2017-07-26 17:39:00      阅读:663      评论:0      收藏:0      [点我收藏+]

标签:color   href   time   trap   javascrip   erp   read   方式   images   

技术分享

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

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插件双日期的设置

标签:color   href   time   trap   javascrip   erp   read   方式   images   

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

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