elementUI日期选择器组件（DatePicker）的使用-带快捷选项和开始、结束值的获取

爱被打了一巴掌 2022-02-25 17:43 811阅读 2赞

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

# html部分 #

<el-date-picker v-model="detailDate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyyMMdd" @change="dateChange" :picker-options="pickerOptions2">
     </el-date-picker>

# jq部分 #

<script>
    export default { 
    	data() { 
              return { 
                detailDate:'',
                startTime: '',
                endTime: '',
                pickerOptions2: { 
                  shortcuts: [
                    { 
                      text: '最近一周',
                      onClick(picker) { 
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 60 * 60 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end])
                      }
                    },
                    { 
                      text: '最近一个月',
                      onClick(picker) { 
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
                        picker.$emit('pick', [start, end])
                      }
                    },
                    { 
                      text: '最近三个月',
                      onClick(picker) { 
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000);
                        picker.$emit('pick', [start, end])
                      }
                    }
                  ]
                }
              }
        },
        methods: { 
    	        dateChange(val) { 
    	            this.startTime = val.toString().split(",")[0]
    	            this.endTime = val.toString().split(",")[1]
    	          },
             }
    }
    
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20220225/ff7da9ea0cd4440fa60309e0f68f4273.png

发表评论取消回复

表情：

评论列表（有 0 条评论，811人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android中DatePicker日期选择器的使用和获取选择的年月日

场景实现效果如下 ![20200105155756207.gif][] 注：博客： [https://blog.csdn.net/badao\_liuman

た入场券/ 2023年10月08日 11:33/ 0 赞/ 14 阅读

相关 VUE-日期选择器-结束时间>开始时间

功能要求：限制结束时间选择范围，结束时间能够选择的起始日期，随着开始时间的选择而变化，也就是保证结束时间时钟>=开始时间。 ![watermark_type_ZmFu

女爷i/ 2023年08月17日 17:46/ 0 赞/ 159 阅读

相关 ElementUI的DatePicker日期选择器默认没有选中样式

[ElementUI的DatePicker多个日期选择器默认没有选中样式的问题][ElementUI_DatePicker] 问题： ![745723-2019081615

ゞ浴缸里的玫瑰/ 2023年08月17日 17:11/ 0 赞/ 186 阅读

相关 vue element-ui （DatePicker)日期选择器获取开始时间和结束时间

<el-date-picker v-model="formData.createTime" type="

川长思鸟来/ 2023年06月29日 05:42/ 0 赞/ 32 阅读

相关 Elementui中日期选择器的使用

准备这里使用了moment.js 关于moment.js的使用,请看[Vue项目中使用moment.js][Vue_moment.js] 日期选择器的使用

我会带着你远行/ 2023年02月24日 11:18/ 0 赞/ 23 阅读

相关使用日期选择器DatePicker(1)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and

Myth丶恋晨/ 2022年09月24日 03:29/ 0 赞/ 271 阅读

相关 Form-datepicker日期选择器

DatePicker 日期选择器：用于选择或输入日期 1、基本单位由type属性指定。type=date时 type：显示类型，默认date，year/month/date

╰半夏微凉°/ 2022年03月29日 10:06/ 0 赞/ 905 阅读

相关 elementUI日期选择器组件（DatePicker）的使用-带快捷选项和开始、结束值的获取

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

爱被打了一巴掌/ 2022年02月25日 17:43/ 2 赞/ 812 阅读

相关 ElementUI DatePicker 日期选择器控制选择时间范围

选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date"

比眉伴天荒/ 2021年12月15日 00:37/ 0 赞/ 785 阅读

相关 iview日期选择器的日期值获取

iview日期选择框的日期值获取控件： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

Love The Way You Lie/ 2021年07月25日 12:34/ 0 赞/ 736 阅读