datepicker - Vue 3 日期选择器 Element-Plus
问题描述
我目前正试图在日期选择器时代(有点像谷歌航班)显示价格(通过 api 加载)。
我目前正在使用 Vue 3。我正在尝试使用 Element-plus 库来实现这一点。我找不到怎么做的方法。任何建议(我检查了 Element-plus 文档),或者建议可能另一个 Vue 3 库完全一样!
这是我的代码
<link href="//unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"/>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div class="grid-container-medium">
<div id="app">
<div class="d-flex justify-content-between">
<div class="block"><span class="demonstration">Single</span>
<el-date-picker :default-value="new Date(2021, 6, 28)"
placeholder="Pick a date"
type="date"
:disabled-date="disabledDate"
v-model="value1"></el-date-picker>
</div>
</div>
</div>
</div>
<script>
var Main = {
data() {
return {
value1: '',
value2: '',
disabledDate(time) {
return time.getTime() < Date.now()
},
};
}
};
;const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
</script>
解决方案
您可以使用 PrimeVue日历组件。它有一个日期槽:
<Calendar id="datetemplate" v-model="date_with_price">
<template #date="slotProps">
{{slotProps.date.day}}<br>
{{slotProps.date.price}}
</template>
</Calendar>
推荐阅读
- python - 将日期数组转换为日期时间格式并进行比较
- angular - 我们如何从 ionic 4 中的 app.component 获取当前页面?
- javascript - 如何根据 GLSL/WebGL 中的某些条件获取像素数?
- matlab - 使用mnrfit在matlab中进行逻辑回归
- vue.js - 如何在 VueJS 2.x 中将对象数组传递给子组件
- angular - 依次执行多个 HTTP 请求
- django - 在 Django Rest API 中搜索 ListAPIView
- typo3 - 在流体中获取父级/嵌套的 Flux CE
- c# - C# 应用程序中的全局鼠标钩子
- reactjs - onClick 属性和函数是否暴露在 react-select 上?