How to add a name to the datepicker input?

[nateritter]

I'm sure I'm missing something obvious here, so please excuse what may be a completely idiotic question (be helpful sans flaming and I'll leave sooner :) ).

I'm using datepicker in a form (in Laravel Spark) like so:

app.js:

window.Vuestrap = require('vue-strap/dist/vue-strap.min.js');

var app = new Vue({
    mixins: [require('spark')],

    components: {
        'datepicker': Vuestrap.datepicker
    },

    data: function () {
        return {
            dob: '01/01/1980'
        }
    }
});

HTML:

<div class="form-group col-md-4">
    <label for="dob">Date of Birth</label>
    <div class="required-field-block">
        <datepicker
          :value.sync="dob"
          format="MM/dd/yyyy">
        </datepicker>
    </div>
</div>

But when I hit the submit button and post the form, there is no field/value which correspond to the datepicker field (although any other basic inputs and their values show up fine)... and adding name= doesn't seem to help.

So, how does one add a name so the value gets submitted through the POST?

Side note: the datepicker example in the documentation is quite buggy. Sometimes it doesn't show the chosen date to the right of "Selected date is:", other times leaving disabled days disabled in the calendar even after that choice was deselected from the dropdown, or the date shown is off by one day from the selected date, etc.

(Using vue-strap v1.0.8 and vue v1.0.13)

[jeitnier]

Just add the attribute yourself in the ready method of your component. So in your case:

window.Vuestrap = require('vue-strap/dist/vue-strap.min.js');

var app = new Vue({
    mixins: [require('spark')],

    components: {
        'datepicker': Vuestrap.datepicker
    },

    ready: function () {
        // add name attribute to datepicker input since
        // vue-strap doesn't provide this prop
        $('.datepicker').find('input').attr('name', 'your-name-attr');
    }

    data: function () {
        return {
            dob: '01/01/1980'
        }
    }
});

It's a lame workaround but it gets the job done.

[azimidev]

what if we don't wanna use jQuery?

[wffranco]

you can make a little hack extending the datepicker.

Check this fiddle: https://jsfiddle.net/wffranco/1zec7xL3/

the example must works even if you change the name dynamically