element UI 时间选择器date-picker

element UI 时间选择器date-picker

vue

date-picker原有的输出值
Tue Mar 01 2022 00:00:00 GMT+0800 (中国标准时间)
需求：转换为YYYYMMDD格式传给后台

console.log传给后台的值

1.html

使用format指定输入框的格式。 使用 value-format 指定绑定值的格式。

<el-form-item label="日期">
            <el-date-picker
              v-model="rq"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYYMMDD"
              @change="changRq"
              :clearable="false"
              :disabled-date="disableDate"
            >
            </el-date-picker>
</el-form-item>

2.js

import { reactive, toRefs} from "vue";
const state = reactive({
      rq:""
    });

setup(){
	//一进入页面date-picker会显示当前日期
	onMounted(() => {
      getToday();
    });
    
	//获取当前默认日期
    const getToday = () => {
      const today = new Date().toLocaleDateString();
      state.rq = getDate(today);
    };

    const changRq = (val) => {
      state.rq = getDate(val);
    };
	
	//不可用日期，当前日期之后
    const disableDate = (time) => {
      return time.getTime() > Date.now();
    };
    
	//日期格式转换,传参为new Date()
	//默认情况下，date-picker组件接受并返回Date对象。
    const getDate = (time) => {
    //如果传参数为时间戳，10位需*1000，时间戳为13位的话不需乘1000
    //var date = new Date(timestamp*1000);
      const date = new Date(time);
      let Y = date.getFullYear();
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      
	//return Y + "-" + M + "-" + D;改value-format没用，我也不知道为什么
    //最后传给后台的格式YYYYMMDD
      return Y + M + D;
    };
    return {
      ...toRefs(state),
      getToday,
      getDate,
      changRq,
      disableDate,
    };
}

微博同名，如有问题可留言至微博