Topic: Vue Date Picker problem
                  
                  joaobiqx
                  free
                  asked 6 years ago
                
Expected: No errors
Behavior: [Vue warn]: Missing required prop: "date"
found in
---> at node_modules/mdbvue/src/components/pro/DatePicker.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at node_modules/mdbvue/src/components/Container.vue at src/components/Index.vue at src/App.vue [Vue warn]: Error in render: "TypeError: Cannot read property 'time' of undefined"
found in
---> at node_modules/mdbvue/src/components/pro/DatePicker.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at node_modules/mdbvue/src/components/Container.vue at src/components/Index.vue at src/App.vue
Resources (screenshots, code snippets etc.) Code:
    <template>
...
            <mdb-date-picker style="margin-left:2.5rem;" v-model="date"/>
...
    </template>
    <script>
    import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardUp, mdbAvatar, mdbIcon, mdbCardFooter, mdbCardText, mdbCardTitle, mdbCardHeader, mdbDatePicker } from 'mdbvue';
    export default {
      name: "Index",
      components: {
          mdbContainer,
          mdbRow,
          mdbCol,
          mdbCard,
          mdbCardBody,
          mdbCardUp,
          mdbAvatar,
          mdbIcon,
          mdbCardFooter,
          mdbCardText,
          mdbCardTitle,
          mdbCardHeader,
          mdbDatePicker
      },
      data() {
          return {
            date: '',
            options: {
              type: 'day',
              SundayFirst: false,
              week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
              month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              format: 'YYYY-MM-DD',
              color: {
                header: 'primary',
                headerText: 'white',
                checkedDay: 'primary'
              },
              placeholder: '2018-04-13',
              buttons: {
                ok: 'OK',
                clear: 'Clear',
                today: 'Today'
              },
              overlayOpacity: 0.5
            }
          };
      }
    }
    </script>
    <style scoped>
    .big-text {
      font-size: 40px;
      font-weight: bold;
    }
    </style>
                
                  
                      
                      Magdalena Dembna
                      staff
                        answered 6 years ago
                    
It appears your MDB Vue version is out of date - I've tested your code on the most recent package (5.8.0) and it seems to work fine. The reason this code won't work on older MDB Vue version is that v-model wasn't supported by DatePicker until recently. If update isn't an option for you, you will need to use date property instead. 
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Vue
 - MDB Version: 4.10.1
 - Device: PC
 - Browser: Chrome
 - OS: Linux
 - Provided sample code: No
 - Provided link: No