vue-element-ui 日期选择器 前后端联调

前端:

<el-col :span="8">
          <div class="block">
            <el-col :span="4">交接日期</el-col>
            <el-col :span="1"></el-col>
            <el-col :span="16">
              <el-date-picker
                style="width:100% ;hight:100%"
                v-model="joinDateValue"
                size="mini"
                type="daterange"
                @change="changeDate"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
            </el-col>
            <el-col :span="1"></el-col>
          </div>
        </el-col>

export default {
  data: function () {
    return {
         joinDateValue: [],
     
    }
  },
 methods: {
     changeDate: function () {
      if (this.joinDateValue.length > 0) {
        const joinDateAny = [];
        this.joinDateValue.forEach(item => {
          joinDateAny.push(parseTime(item, '{y}-{m}-{d}'));
        })
        this.joinDateValue = joinDateAny;
      }
    }
  },

data.js

export const calcDate = (date1, date2) => {
  var date3 = date2 - date1

  var days = Math.floor(date3 / (24 * 3600 * 1000))

  var leave1 = date3 % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
  var hours = Math.floor(leave1 / (3600 * 1000))

  var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
  var minutes = Math.floor(leave2 / (60 * 1000))

  var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
  var seconds = Math.round(date3 / 1000)
  return {
    leave1,
    leave2,
    leave3,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

/**
 * 日期格式化
 */
export function dateFormat(date) {
  let format = 'yyyy-MM-dd hh:mm:ss';
  if (date != 'Invalid Date') {
    var o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "h+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
          RegExp.$1.length == 1 ? o[k] :
            ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }
  return '';

}

/**
 * 日期格式化
 */
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

后端：、

package com.yintn.cbms.basicinfo.api.vo;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * <p>
 * 交接单管理
 * </p>
 *
 * @author clt
 * @since 2023-11-21 09:50:49
 */
@Data
@Accessors(chain = true)
@ApiModel(value = "TJoin请求对象", description = "交接单管理")
public class TJoinVo implements Serializable {


    @ApiModelProperty("交接日期")
    private List<Date> joinDate;

    @ApiModelProperty("交接类型(1:实胆交接单，2:空胆交接单，3:实款包交接单，4:空款包交接单)")
    private String joinType;


    @ApiModelProperty("分公司名称")
    private String companyName;


    @ApiModelProperty("票胆间/充值点名称")
    private String roomName;

    @ApiModelProperty("交接状态(0:交接完成1:交接中)")
    private String sts;


    @ApiModelProperty("当前页码")
    private Integer current;

    @ApiModelProperty("当前显示条数")
    private Integer size;

    public void setJoinDate(List<String> joinDateList) {
        if (joinDateList == null || joinDateList.isEmpty()) {
            this.joinDate = null;
        } else {
            List<Date> list = new ArrayList<>();
            joinDateList.forEach(joinDate -> {
                try {
                    joinDate = joinDate.substring(0, 10);
                    SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");
                    list.add(sf.parse(joinDate));
                } catch (ParseException e) {
                    throw new RuntimeException(e);
                }
            });
            if (list.isEmpty()) {
                this.joinDate = null;
            } else {
                this.joinDate = list;
            }

        }
    }
}