Bootstrap Vue datepicker failed for prop max, expected String, Date, got Date

user_1266449 0
Viewed 382

I am using Bootstrap Vue and more specifally the formdatepicker. It's looking like this:

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

I want to restrict the max date to be 16 years ago from today. So I use this code:

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
  },

When I then start my Nuxt app, I am getting the following error: 

[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>

I'm not sure where or what the error is, since the variable is definitely a Javascript Date. When trying to put .toString() at the end, it does not work at all anymore.

Please note, that even though the application is giving the error as shown, it does work perfectly with the Javascript Date object.

bootstrap-vue vue.js
1 Answers

Without the full script (especially the data object) I can't say what is the root of your issue here, but going off of the Bootstrap Vue demo, the code below works. What you're likely experiencing is a conflict between created function and whatever you have in 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>
user_87008090
Related