Vue-js removed selected date from textbox when add new element

Question

Vue-js remove selected date from textbox when add new element. if i entered any text instead of date and add new element text is display as is it. but date is removed.

below is my HTML code

<div class="dateAvailabilityContainer">

            <div class="dateAvailability" v-for="(date, index) in dates">
                <div class="form-group date">
                    <input type="text" v-model='date.date' class="form-control date" v-bind:class="'datepicker_'+index" placeholder="Date">
                </div>
                <div class="form-group">
                    <input type="text" v-model='date.from' class="form-control from" placeholder="From">
                </div>
                <div class="form-group">
                    <input type="text" v-model='date.to' class="form-control to" placeholder="To">
                </div>
                <a href="#" v-if="index == 0" class="btn btn-success" v-on:click="addNewDate">
                    <i class="fa fa-plus"></i>
                </a>
                <a href="#" v-if="index > 0" class="btn btn-danger" v-on:click="removeThisDate(index)">
                    <i class="fa fa-minus"></i>
                </a>
            </div>

        </div>

and below is my vue-js code

var addAvailability = new Vue({
        el: '#addAvailability',
        data: {
            dates : [{
                date : '',
                from : '',
                to : '',
            }],
        },
        mounted: function () {
            this.addDatePicker( this.dates.length - 1 );
        },
        methods: {
            addNewDate: function () {
                this.dates.push({
                    date: '',
                    from: '',
                    to: '',
                });
                this.addDatePicker( this.dates.length - 1 );
            },
            removeThisDate : function(index){
                this.dates.splice(index, 1);
            },
            addDatePicker : function( id ){
                setTimeout(function(){
                    console.log('.datepicker_'+id);
                    $('.datepicker_'+id).datepicker({
                        autoclose: true,
                    });
                },500);
            }
        }
    });

please help where i create a mistake.

please check in fiddle : https://jsfiddle.net/renishkhunt/bod4ob5y/19/

Thanks

@AldoRomo88 please check in Fiddle : jsfiddle.net/renishkhunt/bod4ob5y/19 — Renish Khunt
– Renish Khunt, Commented Feb 10, 2017 at 5:31

AldoRomo88 · Accepted Answer · 2017-02-10 14:10:45Z

1

Bootstrap (js) and jquery aren't friendly working with vue.

I think that it is because they modify DOM directly while vue also has a virtual DOM and works in a more data driven way.

Make them work together requires extra logic, I could only fix datetimepicker, I never haven't work with clockpicker before

First I change addNewDate function

//Save new date in a variable
var dateModel = {
  date: '',
  from: '',
  to: '',
};
this.dates.push(dateModel);
var elementId = "datepicker_"+(this.dates.length - 1);
//pass new date to initDate function
this.initDate( elementId, dateModel );

In initDate we need to listen for date changes and update model

$('#'+id).datepicker({
   ...
}).on('changeDate', function(e){
    dateModel.date = e.format();
});

Please see this partially working fiddle

As alternative you could use vue-flatpickr, at this moment is the best "vue's way" that I have found to handle date time inputs

answered Feb 10, 2017 at 14:10

AldoRomo88

2,0761 gold badge18 silver badges23 bronze badges

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

1 Comment

David K. Hess Over a year ago

AldoRomo88 is correct - you have to hook the change event for the calendar widget and make sure that it is applied to the model after the picker closes. You can see this pretty clearly if you use Vue DevTools in Chrome.

Collectives™ on Stack Overflow

Vue-js removed selected date from textbox when add new element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related