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

1.使用el-date-picker组件

<el-form-item label="生日" :label-width="formLabelWidth" prop="birthday"><el-date-pickerv-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,// 登录IDloginId: 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.效果

Vue el-date-picker 组件时间格式化方式相关推荐

java date 格式化_3种 Springboot 全局时间格式化方式，别再写重复代码了
原文:3种 Springboot 全局时间格式化方式,别再写重复代码了掘金作者: 程序员内点事时间格式化在项目中使用频率是非常高的,当我们的API接口返回结果,需要对其中某一个date字段属性进 ...
3种 Springboot 全局时间格式化方式，别再写重复代码了
时间格式化在项目中使用频率是非常高的,当我们的 API 接口返回结果,需要对其中某一个 date 字段属性进行特殊的格式化处理,通常会用到 SimpleDateFormat 工具处理. SimpleD ...
Springboot实战：3种 Springboot 全局时间格式化方式
时间格式化在项目中使用频率是非常高的,当我们的 API 接口返回结果,需要对其中某一个 date 字段属性进行特殊的格式化处理,通常会用到 SimpleDateFormat 工具处理. SimpleD ...
Vue中利用moment.js(时间格式化插件)做一个倒计时组件
moment.js 文档:https://momentjs.com/docs/#/-project-status/ 1.使用npm安装moment npm install moment --save ...
教女朋友学习 vue中的过滤器及其时间格式化
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
字符串格式化成时间格式_JAVA | 常用的日期/时间格式化方式
引言我们在开发过程中,在数据库中经常会看到beginTime.updateTime和endTime这些字段,这些可能是为了记录业务操作的某个时间.日期等信息.特此,总结一些在代码中常用的日期.时 ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
vue之非父子组件通信实现方式
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信.这里主要讲两种方式: Provide/Inject Mitt全局事件总线 1.Provide和Inject 应用 ...
在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...

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

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

1.使用el-date-picker组件

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

示例：

3.效果

Vue el-date-picker 组件时间格式化方式相关推荐

最新文章

热门文章