Vue.js datepicker not allowing the update of default value of input field

Question

i was using the vue-date-picker for date picker functionality at an input fields because it matched 100% to my requirements. Problem is it working but on loading the page i am passing a default value from the database. but it is not showing me the value until i delete the v-model attribute.

And when i delete this attribute it did not update the date selecting from the datepicker calendar.

here is my code i am using in html

<input type="text" id="regular-date" class="form-control w-p100" placeholder="eg. 21 August, 2018" readonly @focus="showRegularDate = true">
<transition name="calendar-fade">
    <date-picker color="#b173f8" :format="formatDate"
                 @close="showRegularDate = false"
                 v-if="showRegularDate"
                 v-model="regularDate"></date-picker>
</transition>

in script for the format i'm using

<script>
        Vue.use(DatePicker)
        Vue.config.lang = 'en';
        new Vue({
            el: '.app',
            created: function () {
                var today = new Date
                this.minDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
                this.maxDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + (today.getDate() + 7)
            },
            data: {
                regularDate: '',
                regularDate_2: '',
                regularDate_3: '',
                regularDate_4: '',
                regularDate_5: '',
                showRegularDate: false,
                minDateLimit: '',
                minDate: '',
                showMinDate: false,
                maxDateLimit: '',
                maxDate: '',
                showMaxDate: false,
                rangeDate: '',
                showRangeDate: false,
                specifiedDate: '2016-4-19',
                showSpecifiedDate: false,
                formattedDate: '',
                showFormattedDate: false
            },
            methods: {
                formatDate(date) {
                    return moment(date).format('LLLL');
                },
                formatDate_2: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_3: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_4: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_5: function (date) {
                    return moment(date).format('LLLL');
                }
            }
        })
    </script>

i am just using this vue for the datepicker. Is there some settings i should do or i'm missing something?.

ok i understood, but it's large to explain it in comment

Boussadjra Brahim
– Boussadjra Brahim

2018-09-08 14:20:35 +00:00
Commented Sep 8, 2018 at 14:20 — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 8, 2018 at 14:20
let discuss this in chat

fat_potato
– fat_potato

2018-09-08 14:25:09 +00:00
Commented Sep 8, 2018 at 14:25 — fat_potato
– fat_potato, Commented Sep 8, 2018 at 14:25

JonathanDavidArndt · Accepted Answer · 2018-09-11 13:38:20Z

2

In your template, change the date-picker @close event to @close="closeDatePickerPopup"

and in your methods object add the following method :

closeDatePickerPopup() {
   this.showRegularDate = false;
   console.log(this.regularDate);
   // here you have access to this.regularDate
   // and you could do whatever you want with this.regularDate
}

and if you want an initial value for this.regularDate add this snippet :

created:function() {
   // ------------
},
mounted: function () {
   // initialize this.regularDate as follow    
   this.regularDate = "2018-09-08";
},

edited Sep 11, 2018 at 13:38

JonathanDavidArndt

2,76013 gold badges41 silver badges53 bronze badges

answered Sep 8, 2018 at 16:11

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js datepicker not allowing the update of default value of input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related