Vuejs: Insert date today in input

Question

I am using an input for the date. How do we set the Input to display the Date Today? Thank you for your time.

                            <div class="form-group">
                                <label>Debarred</label>
                                <input v-model="form.debarred" type="date" name="debarred"
                                       placeholder="Debarred"
                                       class="form-control" :class="{ 'is-invalid': form.errors.has('debarred') }">
                                <has-error :form="form" field="debarred"></has-error>
                            </div>

palaѕн · Accepted Answer · 2020-04-03 11:41:48Z

1

You can update the model value form.debarred on page load like:

this.form.debarred = new Date().toLocaleDateString('en-CA');
//==> "2020-04-03"

Now, using .toLocaleDateString('en-CA') is need here as <input type="date"> value can only accept a string representing a date in YYYY-MM-DD format, or empty.

DEMO:

const debarred = document.querySelector('[name=debarred]');
debarred.value = new Date().toLocaleDateString('en-CA');

<div class="form-group">
  <label>Debarred</label>
  <input type="date" name="debarred" placeholder="Debarred" class="form-control">
  <has-error :form="form" field="debarred"></has-error>
</div>

edited Apr 3, 2020 at 11:41

answered Apr 3, 2020 at 11:36

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

5 Comments

No One Over a year ago

Wow. Thank you! I'm using vue.js and I placed your code in the script this.form.debarred = new Date().toLocaleDateString('en-CA'); it worked like charm.

No One Over a year ago

Do you have a patreon? How can I remove the time for this code ``` console.log(new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toLocaleString('en-CA'));```

palaѕн Over a year ago

Sorry, but I will be be offline soon. Can't help at the moment. Please post a new question regarding it. I am sure someone will be glad to help. Also, post the question link here. I will try to look into it tomorrow.

No One Over a year ago

Ok. Thank you very much.

palaѕн Over a year ago

You can try this: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toLocaleString('en-CA').split(',')[0]

Collectives™ on Stack Overflow

Vuejs: Insert date today in input

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related