vue.js conflicts with .datepicker and removes date value after changing next v-model input

Question

I have a form implemented with laravel and vue2 and it has some date fields where I'm using datepicker plugin. But problem is, when I go and type in the next (or any other) input, the value of the date field(s) becomes empty. I have tried many ways and looked for many questions and none helped.

See this Short Video for better understanding of the `problem`

input

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input v-model="form.memo_date" class="form-control demoDate2" id="memo_date" name="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="{{old('memo_date')}}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="from_date">From Date</label>
    <input class="form-control demoDate2" v-model="form.from_date" @keyup.prevent="getDuration" id="from_date" name="from_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.from_date">@{{ errors.from_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="to_date">To Date</label>
    <input class="form-control demoDate2" v-model="form.to_date" @keyup.prevent="getDuration" id="to_date" name="to_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.to_date">@{{ errors.to_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label" for="memo_no">Memo No</label>
    <input class="form-control" v-model="form.memo_no" id="memo_no" type="text" name="memo_no" value="{{ old('memo_no') }}">
    <span class="text-danger" v-if="errors.memo_no">@{{ errors.memo_no[0] }}</span>
</div>

data and mounted function

data: {
   ...
   ...
    form: {
        attachment:'',
        memo_no:'',
        memo_date:'',
        from_date:'',
        to_date:'',
        duration:'',
        description:'',
        employees_ids:[],
    },
    errors:[]
},

mounted: function (){
    // datepicker
    $('.demoDate2').datepicker({
        format: "dd-mm-yyyy",
        autoclose: true,
        todayHighlight: true,
        orientation: "bottom auto"
    });
}

Additional Note: I used change() event inside mounted() to alert when the date value is added using datepicker/keyboard and it fires. BUT when the value is removed, the event does not fire!

I have tried This and many more but none helped. Please help me find the issue. Any help is appreciated.

Maybe something causes `.datepicker()` to be re-initialised on the three `.demoDate2` fields? eg, the `mounted` function gets re-invoked. — Roamer-1888, Apr 08 '21 at 23:54
datepicker does not work unless used inside mounted(). why would re-initialisation empty the date field value? — Farhan Ibn Wahid, Apr 09 '21 at 08:25

score 0 · Answer 1 · answered Apr 08 '21 at 02:47

I think you must bind datepicker onSelect event to update the current model.

You can see the example below.

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input v-model="form.memo_date" class="form-control demoDate2" id="memo_date" name="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="{{old('memo_date')}}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

==================================================================================

 data: {
       ...
       ...
        form: {
            attachment:'',
            memo_no:'',
            memo_date:'',
            from_date:'',
            to_date:'',
            duration:'',
            description:'',
            employees_ids:[],
        },
        errors:[]
    },
    
    mounted: function (){
        var self = this;
        // datepicker
        $('.demoDate2').datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom auto",
            onSelect:function(selectedDate, datePicker) {            
                  self.form.memo_date = selectedDate;
            }
        });
    }

note that date value is added perfectly, but when I change any other field, the date value is removed instantly!! — Farhan Ibn Wahid, Apr 08 '21 at 03:15

score 0 · Answer 2 · answered Apr 20 '21 at 03:11

The issue could be a few things:

you are using value and v-model. Dont use value when using v-model, Set the default value when you get an error response (if you are using ajax to post) or set it with a prop if you are using a default post
jQuery is a DOM manipulation library, And vue uses shadow dom. They do not work well together, espesh when jQuery is setting the value of an input.

If you are using a default form to post the inputs, create hidden inputs containing the values and set the values when the date pickers change. If you are using ajax to post this form you will not need the hidden inputs as you have all the data you need in the vue data object.

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input type="hidden" v-model="form.memo_date" name="memo_date">
    <input class="form-control demoDate2" id="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="@{{ form.memo_date }}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="from_date">From Date</label>
    <input type="hidden" v-model="form.from_date" name="from_date">
    <input class="form-control demoDate2" @keyup.prevent="getDuration" id="from_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.from_date">@{{ errors.from_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="to_date">To Date</label>
    <input type="hidden" v-model="form.to_date">
    <input class="form-control demoDate2" @keyup.prevent="getDuration" id="to_date" name="to_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.to_date">@{{ errors.to_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label" for="memo_no">Memo No</label>
    <input class="form-control" v-model="form.memo_no" id="memo_no" type="text" name="memo_no">
    <span class="text-danger" v-if="errors.memo_no">@{{ errors.memo_no[0] }}</span>
</div>

    data: {
       ...
       ...
        form: {
            attachment:'',
            memo_no:'',
            memo_date:'',
            from_date:'',
            to_date:'',
            duration:'',
            description:'',
            employees_ids:[],
        },
        errors:[]
    },
    
    mounted: function (){
        $('.demoDate2').datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom auto",
            onSelect: (selectedDate, datePicker) => {
                // No need to bind this when using arrow functions.
                // You may need to find out which datepicker is changing via the event.target or datePicker to do a switch or if else to set the correct date.
                this.form.memo_date = selectedDate;
            }
        });
    }

checked it and removed unnecessary value, still removes the date which is the problem needs to be solved. And using datepicker like you said makes it not to work — Farhan Ibn Wahid, Apr 21 '21 at 00:55
@Psycho I would probably step away from the jquery option and use a vuejs port of it. https://www.npmjs.com/package/vuejs-datepicker — Michael Mano, Apr 21 '21 at 01:15

vue.js conflicts with .datepicker and removes date value after changing next v-model input

See this Short Video for better understanding of the problem

input

data and mounted function

2 Answers2

See this Short Video for better understanding of the `problem`