I'm trying to add the start date and end date of work. If I select start date end date is start from start date but if I select a start date end date is displaying date picker with [object, object]. How do I solve this issue?

<div class="col-4">
    <div class="octo-form-group">
        <label for="sel1">Starting Date</label>
        <input v-model="start_date" type="text" class="form-control" id="startDates" placeholder="Starting Date" />
    </div>
</div>
<div class="col-4">
    <div class="octo-form-group">
        <label for="sel1">Ending Date</label>
        <input v-model="end_date" type="text" id="endDates" class="form-control" placeholder="Ending Date" />
    </div>
</div>

$(document).ready(function() {
    $("#startDates").datepicker({
        startDate: "today",
        format: 'yyyy-mm-dd',
        todayBtn: 1,
        autoclose: true
    }).on('changeDate', function(selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#endDates').datepicker('setStartDate', minDate);
        vue.start_date = $("#startDates").val();
    });

    $("#endDates").blur(function() {
        var tes = $("#endDates").val();
        vue.end_date = tes;

    });
});

1 Answers

0
DanteTheSmith On

Hard to know without knowing what .datepicker does, what datepicker are you using (jQ has only one? Honestly I don't know, its era has passed so it's my interest for it) and what are its inner workings

BUT this is what I would try - because 9 out of 10 times IMHO it's the problem you are binding an object instead of its property holding a value you want.

Make a breakpoint in your code somewhere where you have start_date and end_date and after you use datepicker and run this in the console (or add it to code in an appropriate spot).

Object.keys(start_date).map(function(prop){console.log("prop: " + prop +" value: " + start_date[prop])});

This will list you all the props and contents of this object so you might notice hey that start_date.date is what I actually want. It is shallow, so you might wanna dig deeper in certain property but as I said 9 out of 10 there is a property named date, value, _d, something that holds the data you want.