javascriptvue.jsvuejs2vue2-daterange-picker

Not able to re-populate back vue2-daterange picker value

Hi i do have existing values to be populated back for datarange picker

for single daterange picker it is working for multi it is not working

here is what i have tried

Question: range is not working and even format DD-MM-YYYY is not working

Vue.use(DatePicker.default); // don't worry about this, it's just for the demo
new Vue({
  el: '#app',
   data () {
    return {
      date1:['10-07-2021'],
      date2:['10-07-2021','18-07-2021'],
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker@1.9.7/dist/build.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>

<div id="app">
 <date-picker v-model="date1" lang="en" format="DD-MM-YYYY"></date-picker>
  <date-picker v-model="date2" :range="Boolean(true)" format="DD-MM-YYYY" lang="en" ></date-picker>
</div>

Please help me thanks in advance!!!

Solution

  • The date picker takes standard javascript Date format. So the date has to be converted to a compatible format first e.g. YYYY-MM-DD or MM/DD/YYYY. For more information, you can refer to https://www.w3schools.com/js/js_date_formats.asp

    Vue.use(DatePicker.default); // don't worry about this, it's just for the demo
new Vue({
  el: '#app',
  data() {
    return {
      date1: ['07-10-2021'],
      date2: ['07-10-2021', '07-18-2021']
    }
  }
})
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker@1.9.7/dist/build.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>

<div id="app">
  <date-picker v-model="date1" lang="en" format="DD-MM-YYYY"></date-picker>
  <date-picker v-model="date2" :range="Boolean(true)" format="DD-MM-YYYY" lang="en"></date-picker>
</div>