Disclaimer: I'm new to vue.js

Im need help to get a date picker working with my modal ponents. I have made the modal and that workers fine, I've also installed a date picker ('flatpickr') and that works fine when I call it on an element not within a ponent.

However when I try to use it on the modal nothing happens. Im unsure where I should be calling the date picker within the ponent as I thought you should refrain from putting anything with side effects as they won't me parsed.

Im unsure where is should be including the flatpickr script, should it be within the template or should it be in my main app.js.

My modal ponent.vue

<template>
<div class="cis-modal is-active">
 <div class="cis-modal-background">
    <div class="cis-modal-content animated bounceInUp">
        <div class="card">
            <div class="card-body">

                <slot></slot>

            </div>
        </div>
    </div>
    <button class="cis-modal-close" @click="$emit('closed')"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>

<script>
 export default {
 }
</script>

The flatpickr script

<script>
 $("#talentDOB").flatpickr({
 enableTime: true,
 dateFormat: "F, d Y H:i"
});

The modal being called

<modal v-if="showEditTalentModal" @closed="showEditTalentModal = false;">
{!! Form::model($talent, ['method' => 'PATCH', 'action' =>     ['TalentController@update', $talent->user_id], 'files'=>true ]) !!}

<div class="form-group">
  {!! Form::label('dob', 'Date of Birth:') !!}
  {!! Form::text('dob', null, [ 'data-input','class'=>'form-control',  'required' => 'required', 'id' => 'talentDOB']) !!}
</div>

<div class="form-group">
 {!! Form::submit('Update Profile', ['class'=>'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</modal>

Thank you in advanced.

Disclaimer: I'm new to vue.js

Im need help to get a date picker working with my modal ponents. I have made the modal and that workers fine, I've also installed a date picker ('flatpickr') and that works fine when I call it on an element not within a ponent.

However when I try to use it on the modal nothing happens. Im unsure where I should be calling the date picker within the ponent as I thought you should refrain from putting anything with side effects as they won't me parsed.

Im unsure where is should be including the flatpickr script, should it be within the template or should it be in my main app.js.

My modal ponent.vue

<template>
<div class="cis-modal is-active">
 <div class="cis-modal-background">
    <div class="cis-modal-content animated bounceInUp">
        <div class="card">
            <div class="card-body">

                <slot></slot>

            </div>
        </div>
    </div>
    <button class="cis-modal-close" @click="$emit('closed')"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>

<script>
 export default {
 }
</script>

The flatpickr script

<script>
 $("#talentDOB").flatpickr({
 enableTime: true,
 dateFormat: "F, d Y H:i"
});

The modal being called

<modal v-if="showEditTalentModal" @closed="showEditTalentModal = false;">
{!! Form::model($talent, ['method' => 'PATCH', 'action' =>     ['TalentController@update', $talent->user_id], 'files'=>true ]) !!}

<div class="form-group">
  {!! Form::label('dob', 'Date of Birth:') !!}
  {!! Form::text('dob', null, [ 'data-input','class'=>'form-control',  'required' => 'required', 'id' => 'talentDOB']) !!}
</div>

<div class="form-group">
 {!! Form::submit('Update Profile', ['class'=>'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</modal>

Thank you in advanced.

• javascript
• vuejs2
• vue-ponent

1 Answer 1

First, import the ponent.

import flatpickr from 'flatpickr'

Then create the flatpicker instance in mounted

flatpickr('#datepicker')

Of course you need to have an input with the same id

<input type="text" id="datepicker" v-model="dateValue" autoplete="off"/>

Actually there is no any special requirements yo use it in Vue.