JSFiddle - React, Tailwind, and code Playground

by kabanoki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div id='app'>
  <v-date-picker
    :popover="{visibility: visibility}"
    v-model='date' />
    <span class="fa fa-calendar" v-on:click="openCalendar"></span>
    {{visibility}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/v-calendar.umd.min.js"></script>

CSS

.open-calendar {
  cursor: pointer;
}

Babel + JSX

new Vue({
	el: '#app',
  data: {
  	date: null,
    visibility: 'hidden',
  },
  methods: {
  	openCalendar() {
      this.visibility = this.visibility == 'hidden' ? 'visible' : 'hidden';
    },
  }
})