el-date-picker unlink-panels

el-date-picker的unlink-panels属性是用来取消两个日期面板之间的联动的。默认情况下，当点击一个日期面板的下一个月或上一个月时，另一个日期面板也会相应地改变。但是，如果将unlink-panels属性设置为true，那么两个日期面板之间的联动将被取消，点击一个日期面板的下一个月或上一个月时，另一个日期面板不会改变。[1][2]

相关问题

el-date-picker中unlink-panels不生效

根据提供的两个引用，可以看出它们的代码几乎完全相同，只有一个细微的区别：第二个引用中多了一个`@change`事件。因此，`unlink-panels`不生效的原因可能是由于这个事件的存在导致了该属性的失效。建议检查一下代码中是否有其他事件或属性与`unlink-panels`有冲突。

如果您想要更深入地了解`el-date-picker`组件的使用，可以参考以下代码示例：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    unlink-panels
    :editable="false"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        shortcuts: [
          {
            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: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    };
  }
};
</script>

使用vue2修改下述代码，el-date-picker初始值分别为今天0点和明天0点。让el-slider滑块控制el-date-picker的时间，滑块的初始最大最小值为el-date-picker的初始值的getTime()，滑块滑动时与el-date-picker联动。 <div> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-slider range style="padding:0 12px;" @change="onChange"></el-slider> </div>

<>
<div>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-value="defaultValue"
:picker-options="pickerOptions"
></el-date-picker>
<el-slider
range
style="padding: 0 12px;"
:min="min"
:max="max"
v-model="sliderValue"
@change="onSliderChange"
></el-slider>
</div>
</template>

<script>
export default {
data() {
return {
value1: [new Date(), new Date(Date.now() + 86400000)],
sliderValue: [new Date().getTime(), new Date(Date.now() + 86400000).getTime()],
pickerOptions: {
selectableRange: '00:00:00 - 23:59:59'
}
}
},
computed: {
min() {
return this.value1[0].getTime()
},
max() {
return this.value1[1].getTime()
},
defaultValue() {
return [new Date(new Date().toLocaleDateString()), new Date(new Date().toLocaleDateString() + ' 23:59:59')]
}
},
methods: {
onSliderChange() {
const [start, end] = this.sliderValue
this.value1 = [new Date(start), new Date(end)]
}
}
}
</script>