Formatting

Input format 1.0.0+

The inputFormat prop specified the format of selected dates in the input element.

                
<date-picker input-format="YYYY-MM-DD"/>

                
<date-picker input-format="jYYYY/jMM/jDD"/>

                
<date-picker type="time" input-format="H:m"/>

                
<date-picker type="datetime" input-format="jYY/jM/jD H:m"/>

The default value of inputFormat props is "date"

If you want to use different formats in difference locales, see here!

the format prop specifies the format of selected dates that's passed in the model as the output.

                
<date-picker v-model="date" format="YYYY-MM-DD"/>

Output: {{date.format.first}}

                
<date-picker v-model="date" format="jYYYY/jMM/jDD"/>

Output: {{date.format.second}}

                
<date-picker v-model="time" type="time" format="H:m"/>

Output: {{date.format.third}}

                
<date-picker v-model="datetime" type="datetime" format="YY-M-D H:m"/>

Output: {{date.format.fourth}}

The default value of format props is "YYYY-MM-DD"

the displayFormat prop specifies the format of selected dates in the footer of datepicker.

                
<date-picker display-format="YYYY-MM-DD"/>

                
<date-picker display-format="jYYYY/jMM/jDD"/>

                
<date-picker type="time" display-format="H:m"/>

                
<date-picker type="datetime" display-format="jD jMMMM ساعت H"/>

The default value of displayFormat props is "jD jMMMM"

If you want to use different formats in difference locales, see here!

In the here I have brought the most common formats that you can use it.

jYYYY/jMM/jDD \| date	{{ today.toString('jYYYY/jMM/jDD') }}
jYY/jMM/jDD	{{ today.toString('jYY/jMM/jDD') }}
YYYY-MM-jDD	{{ today.toString('YYYY-MM-DD') }}
jD jMMMM	{{ today.toString('jD jMMMM') }}
jdddd jD jMMMM jYY	{{ today.toString('jdddd jD jMMMM jYY') }}
HH:mm	{{ today.toString('HH:mm') }}

You can see all of the formats in here!