如何解决VueJS
我已经成功地使用 datetime 对 min 和 max 进行了两次验证。
但是,现在我被要求为日期时间本地输入实现它。
<template>
<div id="bnbReport">
<br>
<form>
<div class="input-group">
<div class="input-group-prepend reportInput">
<span class="input-group-text">FromDate</span>
<input type="datetime-local" v-model="fromDateDefault" :max="toDateDefault" />
</div>
<div class="input-group-prepend reportInput">
<span class="input-group-text">ToDate</span>
<input type="datetime-local" v-model="toDateDefault" :min="fromDateDefault" />
</div>
<b-button-group>
<b-button variant="outline-info" @click="downloadZip">
<b-icon-download />Download
</b-button>
</b-button-group>
</div>
</form>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('reports')
const today = new Date()
const oneWeekAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
export default {
name: 'BnbReport',data () {
return {
toDate: today.toISOString(),fromDate: oneWeekAgo.toISOString()
}
},computed: {
fromDateDefault: {
get () {
return this.fromDate
},set (val) {
this.fromDate = val
}
},toDateDefault: {
get () {
return this.toDate
},set (val) {
this.toDate = val
}
}
},methods: {
...mapActions(['reports','fetchBnbReport']),async downloadZip () {
// const paramsToSend = { DateFrom: '2021-02-14T22%3A00%3A00.000Z',Dateto: '2021-04-05T20%3A59%3A59.000Z' }
const paramsToSend = { DateFrom: this.fromDate,Dateto: this.toDate }
const res = await this.fetchBnbReport(paramsToSend)
const fileURL = `data:application/zip;base64,${res}`
const fileLink = document.createElement('a')
fileLink.href = fileURL
fileLink.setAttribute('download','bnbReport.zip')
document.body.appendChild(fileLink)
fileLink.click()
}
}
}
</script>
也用于设置两个默认值。 ToDate 设置为现在,FromDate 设置为 1 周前。
现在 min 和 max 仅适用于当天,默认值根本不起作用。
请记住,这仅适用于 Chrome。
我已经建议了其他库,但我唯一被允许使用的是 moment...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。