el-date-picker daterange 获取YY-mm-dd
时间: 2023-10-04 18:05:02 浏览: 44
可以通过 el-date-picker 的 value-format 属性来设置日期格式,同时也可以使用 range-separator 属性来设置日期范围的连接符。例如:
```html
<template>
<div>
<el-date-picker
v-model="dateRange"
type="daterange"
:range-separator="' ~ '"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
dateRange: []
}
}
}
</script>
```
上述代码中,我们设置了 el-date-picker 的 type 为 daterange,同时设置了 value-format 为 'yyyy-MM-dd',即获取 YY-mm-dd 格式的日期。同时,我们还设置了 range-separator 属性为 ' ~ ',用于连接起始日期和结束日期。
相关问题
el-date-picker搜索框输入值获取
要获取el-date-picker搜索框输入的值,可以通过v-model来实现。具体步骤如下:
1. 在data中定义一个变量,用于存储搜索框输入的值,例如searchValue。
2. 在el-date-picker中添加一个输入框,通过v-model绑定searchValue变量。
3. 在搜索按钮的点击事件中,可以通过this.searchValue获取到搜索框输入的值。
下面是一个示例代码:
```html
<template>
<div>
<el-date-picker
v-model="queryInfo.time"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
<el-input
slot="picker"
v-model="searchValue"
placeholder="请输入搜索内容"
@keyup.enter.native="search"
></el-input>
</el-date-picker>
<el-button type="primary" @click="search">搜索</el-button>
</div>
</template>
<script>
export default {
data() {
return {
queryInfo: {
time: [],
},
pickerOptions: {
disabledDate(v) {
// 日期禁止选择今天以前的日期
return v.getTime() < new Date().getTime() - 86400000;
},
},
searchValue: "",
};
},
methods: {
search() {
console.log(this.searchValue);
// 在这里可以进行搜索操作
},
},
};
</script>
```
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>
```