bootstrap的datetimepicker 日期控件来袭

简单描述一下本篇内容，Bootstrap 的时间控件，有四个小案例，分别为年月日时分,年月日，每月的第一天，每月的最后一天，首先来看效果图，有需要的再接着往下看，没有的话就不浪费大家时间。ps：我真是个善解人意的小可耐,不许反驳，我不听我不听

• 年月日时分⬇
  

• 年月日⬇
  

• 每月的第一天⬇
  

• 每月的最后一天⬇
  
  代码来喽！！！

首先引入bootstrap和datetimepicker 的 css和js,是无比重要的一步呦，js和css下载链接https://download.csdn.net/download/qq_43143143/13211482

<link rel="stylesheet" href="${ctx}/resource-Main/main/css/bootstrap.css">
<link rel="stylesheet" href="${ctx}/resource-Main/main/css/bootstrap-datetimepicker.min.css">

<script src="${ctx}/resource-Main/main/js/jquery-1.11.1.min.js"></script>
<script src="${ctx}/resource-Main/main/js/bootstrap.min.js"></script>
日期的js
<script src="${ctx}/resource-Main/main/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
日期js，展示样式为中文
<script src="${ctx}/resource-Main/main/js/bootstrap-datetimepicker.zh-CN.js"></script>

年月日时分，

下面是对日期-时间控件的引用：
<div class="group">
        <label class="col-sm-1 control-label" for="time">年月日时分:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control datepicker0"
                   id="time"
                   name="time" style="width: 100%;"/>
        </div>
</div>

<script>
//年月日时分
    $('.datepicker0')
        .datetimepicker({
            language: 'zh-CN',//中文
            autoclose: true,//选择后自动关闭当前时间控件
            minView: 0,
            forceParse: 0,
            todayHighlight: true,
            startView: 2,
            weekStart: 0,
            todayBtn: 1,
            format: "yyyy-mm-dd hh:ii"
        });
</script>

年月日

<div class="group">
                <label for="day"
                       class="col-sm-1 control-label">年月日：</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control datepicker1"
                           id="day"
                           name="day" style="width: 83%;"/>
                </div>
</div>

<script>
 //年月日
    $('.datepicker1')
        .datetimepicker({
            weekStart: 1,
            autoclose: true,
            startView: 2,
            minView: 2,
            forceParse: false,
            language: 'zh-CN',
            format: "yyyy-mm-dd"
        });
</script>

每个月的第一天

<div class="group">
                <label class="col-sm-2 control-label">年月(每月的第一天)：</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control datepicker"
                           id="startDate"
                           name="startDate" style="width: 83%;"/>
                </div>
</div>

<script>
//年月
    $('.datepicker').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        autoclose: true,
        startView: 3,
        minView: 3,
        forceParse: false,
        format: "yyyy-mm-dd"
    });
</script>

每个月的最后一天

<div class="group">
                <label class="col-sm-2 control-label">年月(每月的最后一天)：</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control datepicker"
                           id="endDate"
                           name="endDate" style="width: 80%;" onchange="showLastDate();"/>
                </div>
 </div>

<script>
  //年月
    $('.datepicker').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        autoclose: true,
        startView: 3,
        minView: 3,
        forceParse: false,
        format: "yyyy-mm-dd"
    });

    function showLastDate() {
        var endDate = $('#endDate').val();
        var strs = endDate.split("-");
        var lastDay = getLastDay(strs[0], strs[1]);
        console.log(lastDay);
        $('#endDate').val(strs[0] + "-" + strs[1] + "-" + lastDay);

    }

    function getLastDay(year, month) {
        var new_year = year;    //取当前的年份
        var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
        if (month > 12) {
            new_month -= 12;        //月份减
            new_year++;            //年份增
        }
        var new_date = new Date(new_year, new_month, 1);                //取当年当月中的第一天
        return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
    }

</script>

datetimepicker里面的属性，大家想要知道什么意思的话，可以查看这个博主的文章，写的很详细
https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F

到这里就结束啦，觉得不错的点个赞，希望更多的人可以看到！笔芯