How to Set Default Value to the Input[Type="Date"]

How to set default value to the input[type= date ]

The date should take the format YYYY-MM-DD. Single digit days and months should be padded with a 0. January is 01.

From the documentation:

A string representing a date.

Value: A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.

Your code should be altered to:

<input type="date" value="2013-01-08">

how to set the default date of the day in vue js

v-model on a Date input works with a string in yyyy-MM-dd format. If you're happy to have strings in your model, not date objects, then just put your default date string in the date variable, like this.

date : new Date().toISOString().slice(0,10)

Here's a running example. A name has been changed to avoid having variable names close to reserved keywords !

vm = new Vue({  el : '#vueRoot',  data : { myDate : new Date().toISOString().slice(0,10) }})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div  id='vueRoot'>    <input type='date' v-model='myDate'>    <br>    {{myDate}}</div>

How can I set my reactive form date input value?

You have two possibilities to set you date as default value.

Variant 1:

For setting default date value to <input> tag with type date you should use HTML-property value of input-tag.

Example:

<form [formGroup]="editForm2">
    <input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
    <input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>

Variant 2 (recommended):

You can use an built-in function formatDate() in angular.

Step 1:

Import formatDate() from @angular/common in you component typescript file.

import { formatDate } from '@angular/common';

Note: formatDate(yourDate, format, locale) expects 3-4 parameters.

Step 2:

Format your dates in definition of your form group.

this.editForm = this.formBuilder.group({
      startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
      endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});

Here is working example: https://stackblitz.com/edit/angular-kucypd

Here is documentation of input type date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

How to Set Default Value to the Input[Type="Date"]