JSFiddle - React, Tailwind, and code Playground

by cutcell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

JavaScript

var app = new Vue({
    el: '#app',
    template: `<div class="date-range-picker" @click="onClick()" style="cursor: pointer"> {{ dateRange }} </div>`,
    data: {
      dateRange: '01.01.2018 - 31.01.2018'
    },
    methods: {
      onClick: function() {
        var vm = this;
        $('.date-range-picker').daterangepicker({
          opens: 'right'
        }, function(start, end, label) {
          vm.dateRange = start.format('DD.MM.YYYY') + ' - ' + end.format('DD.MM.YYYY');
        });
      }
    }
  });