【笔记】bootstrap日期插件

第一步：引入css

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css" type="text/css" />

第二步：引入js和配置【建议在页面下方引入】

<script src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>【内部有过期的，建议版本高一点儿】
<script src="${pageContext.request.contextPath }/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<script type="text/javascript">

/* 日期插件 */
$('.form_datetime').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
        todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
        showMeridian: 1,
});
$('.form_date').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,  
    startView: 2,
    minView: 2,
    forceParse: 0
});
$('.form_time').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 1,
    minView: 0,
    maxView: 1,
    forceParse: 0
});

</script>

第三步：页面

<div class="form-group">
    <div class="input-group input-group-lg date form_date" data-date="" data-date-format="yyyy-MM-dd"  data-link-format="yyyy-mm-dd">
        <span class="input-group-addon" ><span id="my-glyphicon-lg" class="glyphicon glyphicon-calendar"></span></span>
        <input type="text" name="enrolTime" class="form-control" placeholder="Please enter the enrolTime"   title="请输入入学时间" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
</div>