Vue 2 Datepicker Component

Question

I am trying to create a Vue 2 component using Bootstrap Datepicker, but I am trying to update input after selecting a date, here is my code:

Vue.component('datepicker', {
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        v-on:blur="updateValue($event.target.value)"\
        v-on:focus="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
       type="text"  />\
',
props: {
    value: {
      type: String,
      default: moment().format('DD-MM-YYYY')
    }
},
mounted: function () {

},
methods: {
    updateValue: function (value) {
        this.$emit('input', value);
    },
}
});

The value is updated perfectly if entered from the keyboard, but not when selected in the calendar. Any ideas on how I can get the value updated by date changes through the calendar?

** Update **

I got the following code:

mounted: function() {
    let self = this;
    this.$nextTick(function() {
        $('.datepicker').datepicker({
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        })
        .on('changeDate', function(e) {
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        });
    });
}

But now it updates the value of all Datepicker instances on the page. How to configure it so that it only updates for the selected Datepicker?

Answer 1

Here is the last working component:

Vue.component('datepicker', {
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
        type="text"  />\
',
props: {
    value: {
      type: String,
      default: moment().format('DD-MM-YYYY')
    }
},
mounted: function() {
    let self = this;
    this.$nextTick(function() {
        $(this.$el).datepicker({
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        })
        .on('changeDate', function(e) {
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        });
    });
},
methods: {
    updateValue: function (value) {
        this.$emit('input', value);
    },
}
});

Answer 2

Datepicker, , :

mounted: function() {
   let self = this;
   let args = {
      format: 'DD-MM-YYYY',
      placeholder: 'dd-mm-yyyy',
      onSelect: function(dateText) {
         self.updateValue(dateText);
      }
   };
   this.$nextTick(function() {
      $('.datepicker').datepicker(args)
   });
}

Answer 3

Thus, you cannot override the selected date, and you will not lose the text that you write in

this.$nextTick(function() {
          $(this.$el).datepicker(args).on('changeDate', function(e:any) {
            var date = e.format(format);
            var sval:string = e.currentTarget.__vue__.$refs.input._value;
             //console.log(sval);               
           //so that value doesnt get erased everytime i put one character there, wait to have more
           if(sval.length>2){ 
             self.updateValue(date); console.log('upate'+date+sval);
             }
        }).on('hide', function(e:any) {
            var date = e.format(format);
            var sval:string = e.currentTarget.__vue__.$refs.input._value;            
             self.updateValue(date); console.log('upate2'+date+sval);              
        });
      });