BootStrap日历插件

BootStrap日历插件

前端引入插件三大步骤

• 引入插件所需的资源文件

  	<%--引入BootStrap日历插件相关资源文件--%>
      <%--按照资源文件相互依赖的顺序来引入--%>
      <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
      <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  
      <%--link标签定义该页面和引入的外部文件之间的关系--%>
      <link type="text/css" rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"/>
      <link type="text/css" rel="stylesheet" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"/>
  	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  

• 创建容器

  <input type="text" id="mydate">
  

• 容器加载完成后，绑定容器调用相应函数

  <script type="text/javascript">
    $(function () {
      $("#mydate").datetimepicker({
        language:'zh-CN', // 语言设为中文
        format:'yyyy-mm-dd', // 日期格式
        minView:'month', // 可以选择的最小视图
        initialDate:new Date(), // 初始化显示的日期
        autoclose:true, // 选择完日期后是否自动关闭
        todayBtn:true, // 显示‘今天’按钮
        clearBtn:true // 清空按钮
      })
    })
  </script>
  

• 效果

  

BootStrap日历插件官网

地址：DateTime Picker · Bootstrap (bootcss.com)

日历详细参数设置参考官方文档！