JSFiddle - React, Tailwind, and code Playground

by Rynne Cowham

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/components/datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/components/datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script-->


<div id="app">

  <div class="uk-form-icon"><i class="uk-icon-calendar"></i>
    <input ref="date" name="termin" v-model="termin" value="" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required">
  </div>
<p>
Date: {{termin}}
</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    termin: ''
  },
  computed: {

  },
  methods: {

  },
  mounted(){
   $(this.$el).on('hide.uk.datepicker', e => this.termin = this.$refs.date.value)
  }
})