当前位置:   article > 正文

Element ui 设置默认时间显示_element ui default-time

element ui default-time

element ui 选择时间组件: 需求:实现默认时间定位于当前时间延后7天的日期;且当前时间之前的日期不能选;

html部分:

  1. <el-date-picker
  2. v-model="shopForm.end_time"
  3. type="datetime"
  4. size="medium"
  5. style="width:100%"
  6. placeholder="选择日期时间"
  7. :picker-options="expireTimeOption"
  8. value-format="timestamp"
  9. default-time="00:00:00"
  10. />

js 部分代码实现:

  1. data() {
  2. return {
  3. shopForm: {
  4. end_time: ''
  5. },
  6. expireTimeOption: {
  7. disabledDate(date) {
  8. return date.getTime() <= Date.now() - 8.64e7 // new Date()
  9. }
  10. }
  11. }
  12. },
  13. created() {
  14. this.setTime() // 设置默认时间
  15. },
  16. methods: {
  17. // 默认时间设置 7天后
  18. setTime() {
  19. const nowD = new Date()
  20. nowD.setTime(nowD.getTime() + 7 * 3600 * 1000 * 24)
  21. this.shopForm.end_time = nowD
  22. },
  23. /**
  24. * 选择时间
  25. */
  26. changeendTime() {
  27. if (this.shopForm.end_time > (Date.now())) {
  28. this.shopForm.end_time = this.shopForm.end_time
  29. } else {
  30. this.shopForm.end_time = ''
  31. this.$message.error('请选择大于当前日期')
  32. }
  33. },
  34. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/113058?site
推荐阅读
相关标签
  

闽ICP备14008679号