日期选择框datetimepicker选择固定月份日期

最新推荐文章于 2024-07-29 14:48:30 发布

loowooowool

最新推荐文章于 2024-07-29 14:48:30 发布

阅读量4.1k

点赞数 1

分类专栏： web前端文章标签： bootstrap 前端框架

本文链接：https://blog.csdn.net/loowooowool/article/details/69945879

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人所用时间选择框是基于bootstrap框架，实现功能限制是，后台传入页面一个固定月份，前端只让选择本月份的日期，日期格式为：年、月、日

需要引入的包：

bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css
bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.fr.js
bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js

HTML代码：

后台传入的月份隐藏域(格式只包括年、月)

<input type="hidden" name="period" id="period" value="${period}"/>

时间框代码：

<label class="col-sm-1 control-label no-padding-right">时间：</label>
            <div class="col-sm-2 no-padding-left input-append date">
                <span class="block input-icon input-icon-right">
                <input class="form_datetime_2 form-control" id="StartTime" name="StartTime" value="${StartTime}"/>
                <i class="icon-calendar "></i>
                </span>
            </div>
            <div class="col-sm-1 no-padding">
                <div style="text-align: center;padding-top:3%">至</div>
            </div>
            <div class="input-append date  col-sm-2 ">
                <span class="block input-icon input-icon-right">
                <input class="form_datetime_2 form-control" id="EndTime" name="EndTime" value="${EndTime}"/>
                <i class="icon-calendar"></i>
                </span>
            </div>

JS代码：

var detailStartTime = $("#period").val() + "-01";
    var detailEndTime;
    var periodY = parseInt($("#period").val().substring(0,3));
    var periodM = parseInt($("#period").val().substring(5));
    if(periodY%4 == 0 && periodM == 2){
        if(periodY%100 == 0 && periodY%400 != 0){
            detailEndTime = $("#period").val() + "-28";
        }else{
            detailEndTime = $("#period").val() + "-29";
        }
    }
    if(periodY%4 != 0 && periodM == 2){
        detailEndTime = $("#period").val() + "-28";
    }
    if(periodM == 1 || periodM == 3 || periodM == 5 || periodM == 7 || periodM == 8 || periodM == 10 || periodM == 12){
        detailEndTime = $("#period").val() + "-31";
    }
    if(periodM == 4 || periodM == 6 || periodM == 9 || periodM == 11){
        detailEndTime = $("#period").val() + "-30";
    }

    var startTime = $("#StartTime");
    var endTime = $("#EndTime");
    startTime.datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayBtn: true,
        startView: 'month',
        minView: 'month',
        startDate:detailStartTime,
        endDate:detailEndTime
    }).on('changeDate',function () {
        var start = $(this).val();
        var end = endTime.val();
        checkTime(start,end);
    });
    endTime.datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayBtn: true,
        startView: 'month',
        minView: 'month',
        startDate:detailStartTime,
        endDate:detailEndTime
    }).on('changeDate',function () {
        var start = startTime.val();
        var end = $(this).val();
        checkTime(start,end);
    });

    function checkTime(startTime,endTime) {
        var start = startTime.split('-').join('').toString();
        var end = endTime.split('-').join('').toString();
        if(end && start > end){
            alert("开始时间大于结束时间");
        }
    }

效果图：