elementUI日期时间选择器

分手后的思念是犯贱 2024-04-08 09:29 86阅读 0赞

1.只能选择今天和今天以后的时间范围

<el-date-picker
    　　v-model="shop.receive_time[0]"
    　　type="date"
    　　size="small"
    　　format="yyyy-MM-dd"
    　　value-format="yyyy-MM-dd"
    　　:picker-options="pickerOptions"
    　　@change="startTime(shop.seller_id, shop.receive_time)"
    　　placeholder="选择交货开始日期">
    </el-date-picker>

data中加

<script>
        export default {
            data() {
                return {
                    pickerOptions: {
                        disabledDate: time => {
                            　return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
                        },
                }
            }
        }
    </script>

2.只能选择前一个月到昨天的时间范围

<el-date-picker
                type="date"
                :placeholder="$t('financial.sell.choose_data')"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                v-model="startDailyDate"
                style="width: 100%">
    </el-date-picker>

data中加

<script>
        export default {
            data() {
                return {
                  pickerOptions: {
                    disabledDate: (time) => {
                      return (
                        time.getTime() < new Date(this.timeOne).getTime() - 8.64e7 ||
                        time.getTime() > new Date(this.timeDefault).getTime()
                       );
                   },
                 timeOne: "",
            },
         },
    
    computed: {
    //计算属性计算前一天的日期
        timeDefault() {
          var date = new Date();
          var month = date.getMonth() + 1;
          const newmonth = month >= 10 ? month : "0" + month;
          var s1 = date.getFullYear() + "-" + newmonth + "-" + (date.getDate() - 1);
          return s1;
        },
      },
    
    methods: {
        //获取当前年月日时分秒
        getDate() {
          const nowDate = new Date();
          var y = nowDate.getFullYear();
          var m = nowDate.getMonth() + 1;
          var d = nowDate.getDate();
          //  当前日期
          let nowDates =
            y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
          //   一月的时候年份要减一
          if (m == 1) {
            y--;
            m = 12;
          } else if (m == 3 && d > 28) {
            //三月要考虑是否为闰年
            m--;
            if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
              d = 29;
            } else {
              d - 28;
            }
          } else if ((m != 12 || m != 8) && d == 31) {
            //31号的月份要考虑上个月是否有31号
            m--;
            d = 30;
          } else {
            m--;
          }
          // 一个月前的日期
          this.timeOne =
            y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
        },
    
    },
    };
    </script>

![69fb6b8c8d8d42fd9a27d3ce0b19fb35.png][]![eb545c2479eb4c60b5b79067faa3ddb1.png][]

3.半年前禁用的时间范围

<script>
        export default {
            data() {
                return {
                    pickerOptions: {
                     //半年前禁用
                        disabledDate(v) {
                          return v.getTime() < new Date().getTime() - 86400000*183;
                         }
                }
            }
        }
    </script>

[69fb6b8c8d8d42fd9a27d3ce0b19fb35.png]: https://img-blog.csdnimg.cn/69fb6b8c8d8d42fd9a27d3ce0b19fb35.png
[eb545c2479eb4c60b5b79067faa3ddb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d46a62fc62834e6a89b6f63b0f5e9702.png

发表评论取消回复

表情：

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

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

相关阅读

相关 elementUI日期时间选择器

1.只能选择今天和今天以后的时间范围 <el-date-picker 　　v-model="shop.receive_time[0]" 　　type=

分手后的思念是犯贱/ 2024年04月08日 09:29/ 0 赞/ 87 阅读

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

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

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

相关 elementui日期时间选择限制

参考文章 https://blog.csdn.net/qq\_36747046/article/details/106946325 https://blog.csdn.n

Bertha 。/ 2022年12月22日 15:30/ 0 赞/ 275 阅读

相关 elementui 时间件选择器 zuijinwunian

pickerOptions: \{ disabledDate (time) \{ var startDate = new D

深碍√TFBOYSˉ_/ 2022年12月17日 11:53/ 0 赞/ 248 阅读

相关 elementUI-日期选择器（单个框限制选择范围、快捷键选择）

.el-input { width: 30%; margin-right: 20px; } <div id="page">

刺骨的言语ヽ痛彻心扉/ 2022年11月27日 03:07/ 0 赞/ 669 阅读

相关 elementUI-日期选择器（两个框限制选择范围、快捷键选择）

.el-input { width: 30%; margin-right: 20px; } <div id="page">

快来打我*/ 2022年11月26日 07:52/ 0 赞/ 409 阅读

相关 input日期时间范围选择器

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/02dd108a645d423

不念不忘少年蓝@/ 2022年09月12日 12:46/ 0 赞/ 303 阅读

相关带时间的日期选择器

链接地址：[http://www.sencha.com/forum/showthread.php?137242][http_www.sencha.com_forum_showt

r囧r小猫/ 2022年08月02日 02:27/ 0 赞/ 272 阅读

相关 Form-datetimepicker日期时间选择器

一、日期和时间点 DateTimePicker 日期时间选择器,在同一个选择器里选择日期和时间通过设置type属性为datetime，即可在同一个选择器里同时进

- 日理万妓/ 2022年03月29日 10:50/ 0 赞/ 588 阅读

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

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

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