Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Binho's avatar
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

0 likes
0 replies

Please or to participate in this conversation.