elementUI中el-date-picker日期插件设置默认日期(年月日)及设置时间范围(禁止今天之前和14天两周之后的时间)

一、显示当前的年月日

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
        }
      }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容