[Vuejs]-Vue Data not getting updated

by

0👍

According to the usage instructions, you set format inside a locale object. This works for me.

new Vue({
  el: '#app',
  data: {
    currentRange: 'Last 7 Days',
    presets: {},
    range: {}
  },
  mounted() {
    let vm = this;
    $("[name='daterange']")
      .daterangepicker({
        ranges: vm.presets,
        opens: 'left',
        locale: {
          format: 'YYYY-MM-DD'
        },
        startDate: '2017-01-01',
        endDate: '2017-02-01'
      }, function(start, end, label) { // cb for when dates are picked
        vm.range = {
          start: start,
          end: end
        };
      });
  }
});
<!-- Include Required Prerequisites -->
<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <button name='daterange'>Pick</button> {{range}}
</div>

Leave a comment