日期选择器快速选择今天，昨天，本周，上周，本月，上月，本年，最近七天，最近三天_holily_的博客-CSDN博客_小时本周本月日期范围开始时间选择日期选择时间选择

安宇雨 - 随手采集
2020-06-24 12:25:28
随手采集
0000-未整理-等待研究

  日期选择器，年月日的，开始日期和结束日期
     <el-date-picker
              v-model="startStart"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd"
              @change="dataChange"
              :picker-options="pickerOptions"
           ></el-date-picker>

data里放快捷键

  pickerOptions: {
        shortcuts: [
          {
            text: "今日",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨日",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [date, date]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
             const start = new Date();
              const end=new Date();
              const nows = start.getDay()||7  //注意周日算第一天，如果周日查询本周的话，天数是0，所有如     果是0，默认设置为7
              start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)));
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const dataValue = new Date();
              const year = dataValue.getFullYear();
              const month = dataValue.getMonth() + 1;
              const day = dataValue.getDate();
              var thisWeekStart; //本周周一的时间
              if (dataValue.getDay() == 0) {
                //周天的情况；
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() + 6) * 86400000;
              } else {
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() - 1) * 86400000;
              }
              const prevWeekStart = thisWeekStart - 7 * 86400000; //上周周一的时间
              const prevWeekEnd = thisWeekStart - 1 * 86400000; //上周周日的时间
              const start = new Date(prevWeekStart); //开始时间
              const end = new Date(prevWeekEnd); //结束时间
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(1);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const start = new Date();
              const end = new Date(start);
              end.setMonth(start.getMonth());
              start.setMonth(start.getMonth() - 1);
              end.setDate(0);
              start.setDate(1);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本年",
            onClick(picker) {
              const end = new Date();
              const start = new Date().getFullYear();
              const startYear = new Date(start, 0, 1);
              picker.$emit("pick", [startYear, end]);
            }
          },
          {
            text: "最近七天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }

注意下本周快捷键问题，周日算第一天，如果周日查询本周的话，现在的天数是0，所以默认设置为7

Original url: Access
Created at: 2020-06-24 12:25:27
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论