美文网首页
elementUI中el-date-picker日期插件设置默认

elementUI中el-date-picker日期插件设置默认

作者: 後弦月的雨 | 来源:发表于2020-07-22 16:08 被阅读0次

    一、显示当前的年月日

    image.png

    html

      <el-date-picker v-model="date_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="small" />
    

    js

        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, 'date_time', defaultDate)
    

    2、设置时间范围(禁止今天之前和14天两周之后的时间)

    给 el-date-picker 组件添加 picker-options 属性,并绑定对应数据 pickerOptions
    html

       <el-date-picker v-model="date_time" type="date" placeholder="选择日期" 
        value-format="yyyy-MM-dd" size="small" :picker-options="pickerOptions" @change="getList" />
    

    js

    data() {
        return {
          pickerOptions: {
            disabledDate: (time) => {
              const curDate = (new Date()).getTime()
              const day = 14 * 24 * 3600 * 1000
              const dateRegion = curDate + day
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion
            }
          }
    }
    

    相关文章

      网友评论

          本文标题:elementUI中el-date-picker日期插件设置默认

          本文链接:https://www.haomeiwen.com/subject/mxktlktx.html