Jul 8, 2020
0
Level 12
vue2-datepicker impossible to display datepicker
Hello,
I spent my all day trying to use the "vue2-datepicker" component without success and decided to ask you some help. I don't understand how it works and why I cannot display something.
Below my component "DatePicker.vue" :
<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
export default {
components: { DatePicker },
data() {
return {
value: null,
};
},
};
</script>
<template>
<div>
<date-picker
v-model="value"
:time-picker-options="{ start: '08:30', step: '00:30', end: '18:30',}"
format="hh:mm a"
type="time"
placeholder="hh:mm a"
></date-picker>
</div>
</template>
Below my "app.js" :
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('date-picker', require('./components/DatePicker.vue'));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
Below my "blade.php" :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-start">
@include('organization.menu')
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Planning') }}</div>
<div class="card-body">
<date-picker></date-picker>
<example-component></example-component>
</div>
</div>
</div>
</div>
</div>
@endsection
Many thanks for your help. I'm stuck
Please or to participate in this conversation.