el-date-picker不带输入框

你可以尝试设置 el-date-picker 的属性 type 为 'daterange'，这样它就不会显示输入框，而是只显示一个选择日期的按钮。以下是一个示例代码：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
></el-date-picker>

在上面的代码中，我们通过设置 type 属性为 'daterange'，使 el-date-picker 只显示日期选择按钮。通过设置 range-separator 属性和 start-placeholder 、 end-placeholder 属性，可以自定义日期选择器的样式和占位符文本。

在 Vue 的 data 中，需要定义一个与 v-model 绑定的 dateRange 变量来存储选中的日期范围。

希望能帮到你！如有更多问题，请随时提问。

相关问题

el-date-picker 隐藏输入框

`el-date-picker` 是 Element UI 中的一个日期选择器组件，它提供了一个方便用户选择日期的界面，同时通常会附带一个输入框以便用户直接输入日期。如果你想隐藏这个输入框，你可以通过以下步骤操作：

1. **使用 `type="date"` 或 `type="month"`**：在默认情况下，`el-date-picker` 的类型是 `daterange`，它会显示两个输入框。如果你只需要单个日期或者选择月份，可以将 `type` 属性设置为 `date` 或 `month`。

<el-date-picker type="date" :value="selectedDate" @change="handleDateChange"></el-date-picker>

2. **禁用输入框**：如果你只想展示选择日期的面板，不想让用户输入，可以设置 `disabled` 属性。

<el-date-picker type="date" :value="selectedDate" :disabled="true" @change="handleDateChange"></el-date-picker>

3. **使用 `show-input` prop 控制是否显示输入框**：在一些版本中，`el-date-picker` 提供了 `show-input` prop，可以动态控制输入框的显示与否。

<el-date-picker :type="type" :value="selectedDate" :show-input="showInput" @change="handleDateChange"></el-date-picker>

然后在你的 JavaScript 中控制 `showInput` 的值。

4. **CSS 隐藏**：虽然不是官方推荐的方法，但你也可以通过 CSS 来隐藏输入框，例如添加 `::part(input)` 选择器并设置 `display: none`。

.el-date-picker__input {
  display: none;
}

el-date-picker输入框宽度

el-date-picker输入框的宽度可以通过设置css样式来定义。根据引用中提供的代码，可以看出date-input的宽度是选择器本身的宽度。其中，使用了.date-box来定义宽度，通过设置该类的样式可以消除el-date-picker的自带宽度，具体样式如下：

.date-box >>> .el-date-editor.el-input,
.date-box >>> .el-date-editor.el-input__inner {
  width: 146px;
  margin: 0 10px;
}
.date-input >>> .el-input__inner {
  width: 146px;
  height: 40px;
}

通过应用上述样式，可以设置el-date-picker输入框的宽度为146px。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>