Listen for apply.daterangepicker event in vue component

Question

I think I get how to listen for a click event, but I'm trying to determine how I listen for a custom event for the bootstrap-daterangepicker plugin.

In jquery, you'd normally listen for this event with something like:

 $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

So the event that I'm supposed to be listening for according to the bootstrap-daterangepicker docs is apply.daterangepicker.

I figured I need to bind the event to my element with I would assume a custom event based on the docs:

<date-range-picker v-on:apply.daterangepicker="doSomething"></date-range-picker>

So then in my vue component I have this:

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  data() {
    return {

    }
  },
  mounted() {
      $('.drp').daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      });
  },
  methods: {
    doSomething() {
      console.log('do something');
      console.log(picker.startDate);
    }
  }
}

</script>

I'm just trying to sort out how all this is supposed to work as I'm new to vue, so I'd be happy to just be able to console.log the dates when a date range is selected, but ultimately a more complete solution would be based on this being a DateRangePicker self-contained child component that passes its events and data(?) back to a parent component.

So my quick-and-dirty question would be, how can I just get this working to console.log the selected values?

The end goal question would be, how can I emit this event back to a parent component so I can do something with it.

UPDATE

I've realized I placed the event binding on the main reference to the component, rather than on the underlying html element, so if I change that and just use a simple click event, I can get the doSomething() method to fire at least, so that's a step in the right direction.

UPDATE 2

Apparently v-on:click works, but v-on:change or any other event I try doesn't, so now I'm extra confused about vue.

UPDATE 3

Found this other SO question and I'm not sure if this is the right method or not. It works, but it seems duplicative. I'm registering an event listener on mounted() that calls updateValue(), but then it also has v-on:input="updateValue($event.target.value)". Is this right? How is this not just duplicating the event listener?

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker" v-bind:value="value" v-on:input="udpateValue($event.target.value)">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  props: {
    value: {
      type: String,
      default: moment().format('MM/DD/YYYY')
    }
  },
  data() {
    return {

    }
  },
  mounted() {
      var self = this;
      $(this.$el).daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      }).on('apply.daterangepicker', function(e, picker){
        let start = picker.startDate.format('YYYY-MM-DD');
        let end = picker.endDate.format('YYYY-MM-DD');
        let dates = {};
        dates.start = picker.startDate.format('YYYY-MM-DD');
        dates.end = picker.startDate.format('YYYY-MM-DD');  
        self.updateValue(dates);
      });
  },
  methods: {
    updateValue: function(value) {
      console.log(value);
      //this.$emit('input', dates);
    }
  },
  watch: {

  }
}

</script>

Listen for apply.daterangepicker event in vue component

0 Answers0