若依框架近一周,近一月时间选择按钮的实现

1.html界面的准备

代码如下:

<li class="select-time">
           <label>创建日期: </label>
           <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
           <span>-</span>
           <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
</li>
<li>
           <input type="radio" id="radio1" name="time" style="width:20px;height:17px;margin-top:8px;">
           <span style="vertical-align: super;">最近一周</span>
</li>
<li>
           <input type="radio" id="radio2" name="time" style="width:20px;height:17px;margin-top:8px;">
           <span style="vertical-align: super;">最近一月</span>
</li>

2.javascript的实现

首先在展示界面的函数中获取两个时间变量的值,一个是start time,一个是endtime

代码如下:

 $(function () {
        $("#startTime").val();
        $("#endTime").val();
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            detailView: true,
            detailFormatter: detailFormatter,
            modalName: "工程",
            columns: [{
                checkbox: true
            },
                {
                    field: 'gcid',
                    title: '工程主键',
                    visible: false
                },

引入timecommon.js,这是一个时间工具类
这个工具类所存放的位置
在这里插入图片描述

<script src="/js/timecommon.js"></script>
//该类中的代码
/**
 * 时间通用js
 */

//获得日期对象
var myDate = new Date();
var years = myDate.getFullYear();//获取年份
var day = myDate.getDate();//获取日期
var month = myDate.getMonth();//获取月份
var monthh  = Number(month)+Number("1");//获取1-12月


/**
 *
 * 获取现在的时间
 */
function getCurrentTime(){
    var curreat = years+"-"+monthh+"-"+day;//年份+月份+日期 形式为yyyy-mm-dd
    return curreat;
}

/**
 *
 * 获取一周前现在的时间
 */
function getBeforeWeeks(){
    var subday = new Date(myDate.getTime() - 144*60*60*1000);//获取上个周现在的时间对象,用现在时间-(1000*60*60*24*6)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//上周的年份+上周的月份+上周的日期 yyyy-mm-dd
    return start;
}

/**
 *
 * 获取一天前现在的时间
 */
function getBeforeOneDay(){
    var subday = new Date(myDate.getTime() - 24*60*60*1000);//获取一天前现在的时间对象,用现在时间-(1000*60*60*24)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//昨天的年份+昨天的月份+昨天的日期 yyyy-mm-dd
    return start;
}

/**
 *
 * 获取两天前现在的时间
 */
function getBeforeTwoDay(){
    var subday = new Date(myDate.getTime() - 48*60*60*1000);//获取两天前现在的时间对象,用现在时间-(1000*60*60*24*2)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//两天前的年份+两天前的月份+两天前的日期 yyyy-mm-dd
    return start;
}

/**
 *
 * 获取三天前现在的时间
 */
function getBeforeThreeDay(){
    var subday = new Date(myDate.getTime() - 72*60*60*1000);//获取三天前现在的时间对象,用现在时间-(1000*60*60*24*3)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//三天前的年份+三天前的月份+三天前的日期 yyyy-mm-dd
    return start;
}

/**
 *
 * 获取四天前现在的时间
 */
function getBeforeFourDay(){
    var subday = new Date(myDate.getTime() - 96*60*60*1000);//获取四天前现在的时间对象,用现在时间-(1000*60*60*24*3)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//四天前的年份+四天前的月份+四天前的日期 yyyy-mm-dd
}

/**
 *
 * 获取五天前现在的时间
 */
function getBeforeFiveDay(){
    var subday = new Date(myDate.getTime() - 120*60*60*1000);//获取五天前现在的时间对象,用现在时间-(1000*60*60*24*3)
    var start = subday.getFullYear() + '-' + (subday.getMonth() + 1) + '-' + subday.getDate();//五天前的年份+五天前的月份+五天前的日期 yyyy-mm-dd
    return start;
}

/**
 *
 * 获取上个月的时间
 * @date 传入一个时间参数date,根据传入时间获取这个时间之前一个月的时间
 */
function getPreMonth(date) {
    var arr = date.split('-');  //先用split把字符串按照-分割成年份 + 月份 + 日期
    var year = arr[0]; //这个是管理年份的数组第一个元素
    var month = arr[1]; //这个是管理月份的数组第二个元素
    var day = arr[2]; //这个是管理日期的数组第三个元素
    var days = new Date(year, month, 0);  //根据年月日获取到一个时间对象
    days = days.getDate(); //获得时间对象
    var year2 = year;
    var month2 = parseInt(month) - 1;  //获取上个月的月份
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;  //如果上个月是1月份,那么减一个月,月份变成12月,年份也减一年
        month2 = 12;
    }
    var day2 = day;
    var days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}

/**
 * 获取下个月时间
 *
 * @date  传入一个时间参数date,根据传入时间获取这个时间下个月的时间
 */
function getNextMonth(date) {
    var arr = date.split('-');  //先用split把字符串按照-分割成年份 + 月份 + 日期
    var year = arr[0]; //这个是管理年份的数组第一个元素
    var month = arr[1]; //这个是管理月份的数组第二个元素
    var day = arr[2]; //这个是管理日期的数组第三个元素
    var days = new Date(year, month, 0);
    days = days.getDate(); //获得时间对象
    var year2 = year;  //把输入的年份赋值给变量year2
    var month2 = parseInt(month) + 1;  //月份加一
    if (month2 == 13) {  //如果在年底,月份为12月,年份加1
        year2 = parseInt(year2) + 1;
        month2 = 1;
    }
    var day2 = day;  //把输入的日期赋值给变量day2
    var days2 = new Date(year2, month2, 0);  //根据年月获得当前月份的日期
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {  //小于10月份的在月份前面加0
        month2 = '0' + month2;
    }

    var t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}

//规定时间形式的函数
function formatDateTime(inputTime) {
    var date = new Date(inputTime);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
};
 
 

最后在function函数外面定义两个函数实现按钮的点击操作:

//最近一周
    $("#radio1").click(function () {
        $("#startTime").val(getBeforeWeeks());
        $("#endTime").val(getCurrentTime());
        $.table.search();
    });

    //最近一月
    $("#radio2").click(function () {
        $("#startTime").val(getPreMonth(getCurrentTime()));
        $("#endTime").val(getCurrentTime());
        $.table.search();
    });

3.在xml文件里面定义时间选择

 <if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 -->
                AND date_format(gc.create_time,'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')
            </if>
            <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->
                AND date_format(gc.create_time,'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')
            </if>
            ${params.dataScope}

Logo

快速构建 Web 应用程序

更多推荐