前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用element UI的日期选择器时,默认显示当天日期

使用element UI的日期选择器时,默认显示当天日期

作者头像
xyzzz
修改2020-11-25 14:17:55
11.1K0
修改2020-11-25 14:17:55
举报
文章被收录于专栏:前端学习。前端学习。

需求:输入框中要把当天日期默认显示在输入框中,并且传给后台的日期格式是 2020-11-25

页面效果:

element UI中有一个default-value 属性,可以设置选择器打开时默认显示的时间

不知道是不是方法不对,设置之后没有实现效果。最后通过下面的方法实现效果

代码语言:javascript
复制
  // template
         <el-date-picker
          v-model="searchData.date"
          type="date"
          placeholder="选择日期"
          style="width:150px"
          value-format="yyyy-MM-dd"
          @change="getFilterData"
        />
        
  // js
   data() {
    return {
      searchData: {
        inputValue1: '',
        inputValue2: '',
        date: ''
      }
    }
  },
  mounted() {
    this.getNowTime()
  },
  methods: {
    getFilterData() {
      this.$emit('getFilterData', this.searchData)
    },
    getNowTime() {
      var now = new Date()
      var year = now.getFullYear() // 得到年份
      var month = now.getMonth() // 得到月份
      var date = now.getDate() // 得到日期
      month = month + 1
      month = month.toString().padStart(2, '0')
      date = date.toString().padStart(2, '0')
      var defaultDate = `${year}-${month}-${date}`
      this.$set(this.searchData, 'date', defaultDate)
    }
  }

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档