CODEWITHSUNDEEP
vue.jsbootstrap-datepicker
Cho Eun Geol
Cho Eun Geol

Reputation: 13

vue.js bootstrap-datepicker not changed value

Could you help me?

i use Vue.js + bootstrap-datepicker

If i change the date and click the Search button, it will not change to the date changed.

In my opinion, it seems that the bootstrap-datepicker keeps the value constant.

It will change if you send it as text. How can I solve this?

    <script>
export default{
    data() {
        return {
            queryField: {
                fromdate: "2019-01-01",
                todate: "2019-01-05"
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios
            .get("/api/test")
            .then(response => {
                this.data= response.data;
            })
            .catch(e => {
                console.log(e);
            });
            },
            searchData() {
                var queryFieldJson = JSON.stringify(this.queryField);

                //i want this variable is changed fromdate and todate
                //<input v-model="queryField.fromdate" id="date_picker"><button @click="searchData">search</button>
                //i want fromdate: '2019-01-02', todate: '2019-01-04'
            axios
            .get("/api/test/" + queryFieldJson")
            .then(response => {
                this.data= response.data;
            })
            .catch(e => {
                console.log(e);
            });
        }
    }
};
</script>

Upvotes: 1

Views: 1948

Answers (1)

Riddhi
Riddhi

Reputation: 2244

Data is being updated constantly using v-model in the datepicker.I have displayed your fromdate variable besides the calender button. Please update the date and check. Here is the fiddle link. https://jsfiddle.net/9oLwatq1/1/

 <div id="app">
  <datepicker></datepicker> 
  <br/>
  <br/>
  <br/>
  <br/>
</div>



 var datepickerComponent = Vue.extend({
  template: '<div class="input-group date" v-el:inputgroup>' +
    '<input type="text" class="form-control" v-model="queryField.fromdate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>{{queryField.fromdate}}</span>' +
    '</div>',
  data:function(){
  return {

  };
  },
  ready: function() {
    $(this.$els.inputgroup).datepicker({
      format: 'yyyy/mm/dd',
      autoclose: true
    });
  }
});

Vue.component('datepicker', datepickerComponent);
new Vue({
  el: '#app'
  data: { 
     queryField: {
          fromdate: '2015-01-01'
      }
  },
});

Upvotes: 1

Related Questions