Bootstrap Vue datepicker的prop max, expected String, Date, got Date失败。

Question

我正在使用Bootstrap Vue和更具体的formdatepicker.它看起来像这样。

<b-form-datepicker
  v-model="user.birthdate"
  class="mb-2"
  :max="maxBirthdate"
  :placeholder="$t('birthdate_field_placeholder')"
  :show-decade-nav="true"
/>

我想限制最大日期是16年前的今天。所以我使用了这段代码。

created () {
    let now = new Date()
    let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    let todayMinusSixteenYears = new Date(today)
    todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)
    this.maxBirthdate = todayMinusSixteenYears
  },

当我启动我的Nuxt应用时，我得到了下面的错误。

[Vue warn]: Invalid prop: type check failed for prop "max". Expected String, Date, got Date 

found in

---> <BCalendar>
       <BVFormBtnLabelControl>
         <BFormDatepicker>
           <Anonymous>
             <BFormGroup>
               <FormControlWrapper> at components/form/FormControlWrapper.vue
                 <ValidationObserver>
                   <Pages/register/volunteer.vue> at pages/register/volunteer.vue
                     <Nuxt>
                       <Layouts/default.vue> at layouts/default.vue
                         <Root>

我不知道是哪里出了问题，因为这个变量绝对是一个Javascript日期。当尝试把.toString()放在最后时，它根本无法工作了。

请注意，尽管应用程序给出了如图所示的错误，但它确实可以完美地使用Javascript Date对象。

Answer 1

如果没有完整的脚本（尤其是 data 对象），我不能说你的问题的根源是什么，但是根据Bootstrap Vue的演示，下面的代码可以工作。你可能遇到的问题是在 created 函数和你在 data

<script>
  export default {
    data() {
      let now = new Date()
      let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      let todayMinusSixteenYears = new Date(today)
      todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)

      return {
        value: '',
        maxBirthdate: todayMinusSixteenYears,
      }
    }
  }
</script>