Vue

by Sascha

HTML

<link rel="stylesheet" href="https://unpkg.com/v-calendar/lib/v-calendar.min.css">
<script src="https://unpkg.com/v-calendar"></script>
<div id='app'>
  <br /><br />
  <input type='text' :value="getDateRangeValue('start')">
  <input type='text' :value="getDateRangeValue('end')">
  <br />

  <v-date-picker is-inline='true' mode='range' is-double-paned is-linked v-model='dateRange' tint-color="#006bb6">



  </v-date-picker>

  <br />
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#app',
  data: {
    dateRange: {
      start: new Date(),
      end: new Date()
    },
    // Data used by the date picker
    mode: 'single',
    selectedDate: null,
  },
  methods: {
    getDateRangeValue: function(element) {
      let d= this.dateRange[element];
      let r= [
        [
          d.getFullYear(),
          (0+d.getMonth().toString()).substr(-2),
          (0+d.getDate().toString()).substr(-2)
        ].join('-'),
        [
          (0+d.getHours().toString()).substr(-2),
          (0+d.getMinutes().toString()).substr(-2),
          (0+d.getSeconds().toString()).substr(-2)        
        ].join(':')
      ].join(' ');
      
      let offset = d.getTimezoneOffset();
      let oa = Math.abs(offset);
      let tz= (offset < 0 ? "+" : "-") + ("00" + Math.floor(oa / 60)).slice(-2) + ":" + ("00" + (oa % 60)).slice(-2);
    
      return r+tz;
      console.log(this.dateRange);
      
      return d.getFullYear() + '-' + d.getMonth();
    }
  }
  
})