微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

VueJS

如何解决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 举报,一经查实,本站将立刻删除。