element UI 选择格式更改

大佬们，现在设置日期选择器默认，并且判断在当前时间的八周内为开始日期和结束日期，有案例吗

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
      <div id="app">
        <el-date-picker
          v-model="date" unlink-panels
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </body>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return { 
              date: ''
            }
          },
          created(){
            var d = new Date().getTime();
            var w = 8 * 7 * 24 * 60 * 60 * 1000;
            var startDate = d, endDate = d + w;
            this.date = [startDate, endDate];
          }
        })
      </script>
    </html>
      

  2.   

    这个周数应该是完整的周。所以同一周每天它的范围应该是一样的。
        new Vue({
            el: '#app',
            data: function() {
                let d = new Date()
                let t = d.getTime()
                let w = d.getDay()
                return {
                    date: [t - w * 86400000, t + (8 * 7 - w - 1) * 86400000]
                }
            }
        })
      

  3.   

    <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  v-model="StartchooseDate"
                  format="yyyy年第WW周"
                  type="week"
                  :picker-options="{
                  firstDayOfWeek: 1,
                  }"
                >
                </el-date-picker>            <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  format="yyyy年第WW周"
                  v-model="EndchooseDate"
                  type="week"
                  placeholder="结束周"
                  :picker-options="{
                  firstDayOfWeek: 1,
                  }"
                >
                </el-date-picker>
    是双向选择，然后开始的时间是距离当天的八周前一个周，选择的不是某一天，是整周，
      

  4.   

    已经设置好了，但是现在玉遇到一个bug，点击第二个框后，会报错，想加个判断，必须先选择第一个框的时间，在选择第二个，可是这个判断语句不知道写在哪里
      

  5.   

    就给第二个选择框添加一个disabled属性，没有选择第一个时禁止选择第二个即可。
      

  6.   


    现在是遇到一个问题，设置了了之后，两个框都设置了时间后，点击第一个框的时间清除，就会报错
      weekPickerOptionsStart: {
            //指定时间选择器开始日
            firstDayOfWeek: 1,
            disabledDate(time) {
              let passedDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
              return time.getTime() > (Date.now() - passedDay * 1000 * 60 * 60 * 24) || time.getTime() < new Date('2017-12-25');
            }
          },
          //周一至周日   第二个时间设置
          weekPickerOptionsEnd: {
            firstDayOfWeek: 1,
            disabledDate(time) {
              let startTime = _this.chooseTime.StartchooseDate
              return startTime.getTime() < time.getTime() && time.getTime() - startTime.getTime() > 82 * 1000 * 60 * 60 * 24
            },
            onPick({
                     maxDate,
                     minDate
                   }) {
              _this.startTime = minDate
            }
          },//////////////////////////////////////////
      <!--周/周一至周日-->
                <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  v-model="chooseTime.StartchooseDate"
                  format="yyyy年第WW周"
                  type="week"
                  placeholder="选择开始周"
                  :picker-options="weekPickerOptionsStart">
                </el-date-picker>
                <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  format="yyyy年第WW周"
                  v-model="chooseTime.EndchooseDate"
                  type="week"
                  :disabled="chooseTime.StartchooseDate != null ? false:true"
                  placeholder="结束周"
                  :picker-options="weekPickerOptionsEnd">
                </el-date-picker>
      

  7.   

    报的错是这个 vue.esm.js:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'getTime' of null"found in---> <DateTable> at packages/date-picker/src/basic/date-table.vue
           <Root>
      

  8.   

    在你的基础上修改如下：
    :disabled="chooseTime.StartchooseDate != null ? false:true"
    改为：
    :disabled="!chooseTime.StartchooseDate"
    说明：只是优化修改let startTime = _this.chooseTime.StartchooseDate || new Date()
    return startTime.getTime() < time.getTime() && time.getTime() - startTime.getTime() > 82 * 1000 * 60 * 60 * 24
    说明：添加红色部分，这是修复报错问题。第三点应该监听StartchooseDate值，当清除时同时清除第二个值（也是优化修改）    watch: {
          'chooseTime.StartchooseDate'(v) {
            if (!v) {
              this.chooseTime.EndchooseDate = null
            }
          }
      }
      

  9.   

    重复一下条件：开始周与结束周范围是[1－8]；日期范围必须包括当前日期？
    以当前时间：2019-7-2是第28周
    [21周－29周]、[27周-35周]、 [27周-29周]都是合法
    [20周－28周]、[27周－28周]、[28周-36周] 是否合法？范围是对的，但是我的开始时间已经设置了，只能选择现在时间之前的周
    比如当前是 2019-7-12 是第28 周，但是这一周没有结束，不能选择
    但是，第二个框，是根据第一个变化，第一个选择的是 2019-7-12 是第28 周.就可以在继续选择 2019 的 29，30，31，32，33，34，35，36，你说的是合法的但是现在直接选择结束时间是报错，
    报错代码是：vue.esm.js:628 [Vue warn]: Error in render: "TypeError: startTime.getTime is not a function"found in---> <DateTable> at packages/date-picker/src/basic/date-table.vue
           <Root>需求是，不报错，假如我选择了 2019 年第一周，结束时间只能选择 2019年第一周 至  2019 年第8 周开始：2019年第2周   结束 ：2019第10周
    开始：2019年第3周   结束 ：2019第11周
    .。。
    开始：2019年第28周   结束 ：2019第36周
      

  10.   

       //时间选择设置
          chooseTime: {
            StartchooseDate: new Date().getTime() - 84 * 1000 * 60 * 60 * 24,
            EndchooseDate: new Date().getTime() - 1000 * 60 * 60 * 24
          },  
    我添加了默认的时间
      

  11.   

    data() {
          let _this = this
          let defaultDate = new Date()
          defaultDate.setDate(defaultDate.getDate() - 7 * 8)  // 默认日期调整
          return {
            weekPickerOptionsStart: {
              firstDayOfWeek: 1,
              disabledDate(time) {
                let t = _this.chooseTime.EndchooseDate
                if (t) {
                  let d = t.getDay()
                  return time.getTime() >= t.getTime() + (d === 0 ? 1 : 8 - d) * 86400000 || time.getTime() <= t.getTime() - (11 * 7 + (d === 0 ? 7 : d)) * 86400000
                } else {
                  return false
                }
              }
            },
            weekPickerOptionsEnd: {
              firstDayOfWeek: 1,
              disabledDate(time) {
                let t = _this.chooseTime.StartchooseDate
                if (t) {
                  let d = t.getDay()
                  return time.getTime() <= t.getTime() - (d === 0 ? 7 : d) * 86400000 || time.getTime() >= t.getTime() + (11 * 7 + (d === 0 ? 1 : 8 - d)) * 86400000
                } else {
                  return false
                }
              },
              onPick({maxDate, minDate}) {
                _this.startTime = minDate
              }
            },
            chooseTime: {
              StartchooseDate: defaultDate,
              EndchooseDate: new Date()
            },
    }11 * 7 表示你需要的间隔，只要修改11即可。同时删除监听，没有意义了
          'chooseTime.StartchooseDate'(v) {
            if (!v) {
              this.chooseTime.EndchooseDate = null
            }
          },同时删除 :disabled="!chooseTime.StartchooseDate"
    还有你想要自动修改结束时间已经没有必要。两个输入框都已经动态限制了范围。
      

  12.   


    这里的defaultDate  是什么意思，现在是范围可以了，但是还有一个问题，就是，当先选择第二个时间的时候，可以把这个时间设置为当前的时间的周吗？就是比如现在是2019第28周，然后点击第二个时间选择框的时候显示的 只是现在时间的周，然后下边的置灰。您上边写的代码，现在是  开始：2019第20周   结束：2019第32周
      

  13.   


    这里的defaultDate  是什么意思，现在是范围可以了，但是还有一个问题，就是，当先选择第二个时间的时候，可以把这个时间设置为当前的时间的周吗？就是比如现在是2019第28周，然后点击第二个时间选择框的时候显示的 只是现在时间的周，然后下边的置灰。您上边写的代码，现在是  开始：2019第20周   结束：2019第32周因为我是使用select下拉框来判断显示的是周，还是月，这个月的范围是12 月，我绑定的是同一个开始时间，结束时间，可以说一下，这个当我选择 月的时候，怎样会把周之前选择的时间给清除掉 ，
    <select class="select-granularity" v-model="chooseWhat.granularity">
                  <option value="1" selected="selected">周 (周一到周日)</option>
                  <option value="2">周 (周六到周五)</option>
                  <option value="3">月</option>
                </select>
              </div>
            </div>
            <div class="pay-datetime">
              <div class="span-date">
                <span>日期</span>
              </div>
              <div class="element-date">
                <!--周/周一至周日-->
                <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  v-model="chooseTime.StartchooseDate"
                  format="yyyy年第WW周"
                  type="week"
                  unlink-panels
                  placeholder="选择开始周"
                  :picker-options="weekPickerOptionsStart">
                </el-date-picker>
                <el-date-picker
                  v-if="chooseWhat.granularity ==1"
                  format="yyyy年第WW周"
                  v-model="chooseTime.EndchooseDate"
                  type="week"
                  :disabled="chooseTime.StartchooseDate != null ? false:true"
                  placeholder="结束周"
                  :picker-options="weekPickerOptionsEnd">
                </el-date-picker>            <!--周/周六至周五-->
                <el-date-picker
                  v-if="chooseWhat.granularity ==2"
                  v-model="chooseTime.StartchooseDate"
                  format="yyyy年第WW周"
                  type="week"
                  firstDayOfWeek="6"
                  placeholder="开始周"
                  :picker-options="pickerOptions0">
                  <!-- { firstDayOfWeek: 6 }-->
                </el-date-picker>
                <el-date-picker
                  v-if="chooseWhat.granularity ==2"
                  format="yyyy年第WW周"
                  v-model="chooseTime.EndchooseDate"
                  type="week"
                  placeholder="结束周"
                  :picker-options="pickerOptions1">
                </el-date-picker>
                <!--月-->
                <el-date-picker
                  v-if="chooseWhat.granularity ==3"
                  v-model="chooseTime.StartchooseDate"
                  type="month"
                  placeholder="开始月"
                  :picker-options="pickerOptionsYear0">
                </el-date-picker>            <el-date-picker
                  v-if="chooseWhat.granularity ==3"
                  v-model="chooseTime.EndchooseDate"
                  type="month"
                  placeholder="结束月"
                  :picker-options="pickerOptionsYear1">
                </el-date-picker>
      

  14.   

    let defaultDate = new Date() // 这个还要解释？
    监听chooseWhat.granularity变化就可清空StartchooseDate、EndchooseDate值。
    同样监听EndchooseDate值，当判断没有StartchooseDate值时，你赋值一下不就可以了。
      

  15.   

    还有既然你共用chooseTime.EndchooseDate、chooseTime.EndchooseDate变量，我觉得应该同样可以共用el-date-picker组件。
    我还没完全了解你几种日期之间的关系。
      

  16.   

    三个日期，绑定的是同一个变量，根据绑定上面的select的value，显示对应的时间，现在只有这个周六至周五的有问题，监听，以及周一至周日，月的已经没有问题，只有这个周六至周五的有问题