el-date-picker clearable
时间: 2023-11-03 19:46:49 浏览: 43
El-Date-Picker is a date picker component in the Element UI library for Vue.js. The 'clearable' attribute in El-Date-Picker allows the user to clear the selected date by adding a clear button in the input field. When the user clicks on the clear button, the date value is set to null. This attribute is useful when the user wants to remove the selected date and start fresh.
相关问题
elementui el-date-picker
elementui el-date-picker是一个日期选择器组件,可以用于选择单个日期或日期范围。它支持多种日期格式和选项配置,可以根据需要进行自定义。以下是两个el-date-picker的例子:
1.单日期选择
```html
<el-date-picker clearable v-model="form.fillTime" type="date" style="width:100%;" value-format="yyyy-MM-dd" :picker-options="fillTimePickerOptions" placeholder="请选择业务日期"></el-date-picker>
```
2.日期范围选择
```html
<el-date-picker type="daterange" v-model="value2" value-format="yyyy-MM-dd" :picker-options="exportPickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
```
el-date-picker 中clearable
clearable属性是用于决定是否显示清除按钮的一个Boolean变量。默认情况下,clearable属性的值为true,即显示清除按钮。在el-date-picker中使用clearable属性时,可以通过设置clearable="true"来显示清除按钮。
引用提到,在修改/编辑时,el-date-picker中的清除按钮(×)点击不生效,无法清空,并且重新选择新的日期范围也不显示。这个问题可能是由于回显数据的方式造成的。el-date-picker绑定的变量返回的是一个数组,而在编辑或修改时,我们往往是将数据放在一个对象中。因此,可能是赋值方式不正确导致的问题。
要解决这个问题,我们可以通过正确的赋值方式来解决。将编辑或修改时的数据赋值给el-date-picker绑定的变量时,需要确保赋值的数据是以数组的形式传递的,以便el-date-picker正确显示和清空日期范围。换句话说,确保绑定的变量是一个数组形式的数据。这样就可以正常使用清除按钮并重新选择日期范围。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Element-ui踩坑记录 DatePicker 日期选择器](https://blog.csdn.net/weixin_43827743/article/details/108736256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中el-date-picker 编辑时clearable无法清空](https://blog.csdn.net/PJL13411055804/article/details/128283966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)