Vue el-date-picker 组件时间格式化方式

Vue el-date-picker 组件时间格式化方式

1.使用el-date-picker组件

<el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
                <el-date-picker
                    v-model="ruleForm.birthday"
                    align="right"
                    type="date"
                    placeholder="选择生日"
                    :picker-options="defaultDatePickerOptions">
                </el-date-picker>
            </el-form-item>

2.设置时间组件的规则为：只显示日期，且今天之后的不能选

defaultDatePickerOptions:{
     disabledDate(time) {
          return time.getTime() > Date.now();
      },
      shortcuts: [{
          text: '今天',
          onClick(picker) {
              picker.$emit('pick', new Date());
          }
      }, {
          text: '昨天',
          onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
          }
      }, {
          text: '一周前',
          onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
          }
      }]
  },

示例：

export default {
        name: 'UserEdit',
        data () {

            return {
                ruleForm: {
                    id: null,
                    // 登录ID
                    loginId: null,
                    // 全名
                    fullName: null,
                    

                    orderNum: 0,
                    remark: null
                },
                
                formLabelWidth: '125px', // lable通用宽度

                fileList: [],
                // 验证规则
                rules: {
                    orgId: [
                        { required: true, message: '请选择所属机构', trigger: ['blur', 'change'] }
                    ],
                    fullName: [
                        { required: true, message: '请输入中文名', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                    ],
                  
                    tel: [
                        { validator: telRule, trigger: 'blur'},
                    ],
                },

               

                defaultDatePickerOptions:{
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                
                
            }
        },
       
        
    }

3.效果