Formatting input type date in vue.js

Question

I use bootstrap-vue, which includes an input type of date.

When I write some number, the default format is yyyyyy-mm-dd.

I want to change that format to yyyy-mm-dd.

Ohgodwhy · Accepted Answer · 2019-03-14 06:24:53Z

11

use a formatter:

:formatter="format"

Declare how the value should be formatted within this function:

format(value, event) {
    return moment(value).format('YYYY-MM-DD')
}

As an example using the momentjs library.

answered Mar 14, 2019 at 6:24

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

2 Comments

USER Over a year ago

formatter option works after typing all text. if I type 20190314 it returns 201903-14- .

Ohgodwhy Over a year ago

It should not matter the format at which you type. The purpose of using a data library in the formatter is to take an arbitrary string an attempt to convert it to the proper case. If it's not proper, you should display . an error and let the user know.

Ravi Ram · Accepted Answer · 2020-06-11 23:05:26Z

1

I am using moment.js

data:{
        startDate: moment().format("YYYY-MM-DD"),
        endDate: moment().format("YYYY-MM-DD"),
    }

HTML

<input type="date" class="form-control" v-model="startDate"> {{startDate}}
<input type="date" class="form-control" v-model="endDate"> {{endDate}}

answered Jun 11, 2020 at 23:05

Ravi Ram

24.5k21 gold badges89 silver badges119 bronze badges

Comments

Léo · Accepted Answer · 2020-06-11 07:14:46Z

-1

Try this :

<input type="date" v-model="moment(mydate).format('YYYY-MM-DD')" v-on:input="mydate = moment($event.target.value).toDate()"/>

answered Jun 11, 2020 at 7:14

Léo

1

Collectives™ on Stack Overflow

Formatting input type date in vue.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related