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>

CSS

.date-range-picker {
  border: none;
  color: transparent;
  display: inline-block;
  text-shadow: 0 0 0 black;
  outline: none;
  cursor: pointer;
  
}

.date-range-picker:focus {
  outline: none;
}

JavaScript

var app = new Vue({
    el: '#app',
    template: `<input type="text" class="date-range-picker" @focus="onFocus()" :value="dateRange"/>`,
    data: {
      dateRange: '01.01.2018 - 31.01.2018'
    },
    methods: {
      onFocus: function() {
        var vm = this;
        $('.date-range-picker').daterangepicker({
          opens: 'right',
          locale: {
      			format: 'DD.MM.YYYY'
    			}
        }, function(start, end, label) {
          vm.dateRange = start.format('DD.MM.YYYY') + ' - ' + end.format('DD.MM.YYYY');
        });
      }
    }
  });