乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > Bootstrap3 datetimepicker控件使用实例
  • 收藏本页
      Bootstrap3 datetimepicker控件使用实例
      发布时间:2016-12-21 08:10:59 关键词: Bootstrap,Bootstrap3,datetimepicker
      内容简介:这篇文章主要为大家详细介绍了Bootstrap3 datetimepicker控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下

    1.支持日期选择,格式设定
    2.支持时间选择
    3.支持时间段选择控制
    4.支持中文

    官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/
    git地址:https://github.com/Eonasdan/bootstrap-datetimepicker
    moment语言包:https://github.com/moment/moment
    datetimepicker使用配置说明:http://eonasdan.github.io/bootstrap-datetimepicker/Options/
    moment时间格式化使用说明:http://momentjs.com/docs/

    使用方法,引用的文件:

    <script src="../Js/jquery-1.11.3.min.js"></script> 
    <link href="../Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 
    <script src="../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
     
    <link href="../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
    <script src="../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script> 
    <script src="../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> 
    

    实例1,简单配置:

    <div class="row"> 
     <div class='col-sm-6'> 
     <div class="form-group"> 
      <label>选择日期:</label> 
      <!--指定 date标记--> 
      <div class='input-group date' id='datetimepicker1'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </div> 
     <div class='col-sm-6'> 
     <div class="form-group"> 
      <label>选择日期+时间:</label> 
      <!--指定 date标记--> 
      <div class='input-group date' id='datetimepicker2'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> 
    
    $(function () { 
    
     $('#datetimepicker1').datetimepicker({ 
     format: 'YYYY-MM-DD', 
     locale: moment.locale('zh-cn') 
     }); 
     $('#datetimepicker2').datetimepicker({ 
     format: 'YYYY-MM-DD hh:mm', 
     locale: moment.locale('zh-cn') 
     }); 
    }); 

    实例2,选择时间段:

    <div class="row"> 
     <div class='col-sm-6'> 
     <div class="form-group"> 
      <label>选择开始时间:</label> 
      <!--指定 date标记--> 
      <div class='input-group date' id='datetimepicker1'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </div> 
     <div class='col-sm-6'> 
     <div class="form-group"> 
      <label>选择结束时间:</label> 
      <!--指定 date标记--> 
      <div class='input-group date' id='datetimepicker2'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> 
    
    $(function () { 
     var picker1 = $('#datetimepicker1').datetimepicker({ 
     format: 'YYYY-MM-DD', 
     locale: moment.locale('zh-cn'), 
     //minDate: '2016-7-1' 
     }); 
     var picker2 = $('#datetimepicker2').datetimepicker({ 
     format: 'YYYY-MM-DD', 
     locale: moment.locale('zh-cn') 
     }); 
     //动态设置最小值 
     picker1.on('dp.change', function (e) { 
     picker2.data('DateTimePicker').minDate(e.date); 
     }); 
     //动态设置最大值 
     picker2.on('dp.change', function (e) { 
     picker1.data('DateTimePicker').maxDate(e.date); 
     }); 
    }); 
    

    如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

    Bootstrap学习教程

    Bootstrap实战教程

    Bootstrap Table使用教程

    Bootstrap插件使用教程

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜