Formatting date in HTML side with angular 2

Question

Need to get formatted date. But following code is not working , both date and time are viewed. (need only to view the date part)

 <div class="form-group">               
       <input formControlName="startDate" type="date:'dd/MM/yyyy'" class="form-control" >
 </div>

when type is assigned as type="date", it does not bind with the value we patched (set) .

you need to remove the other type property, you have two type property at the input element, try to remove the last one which is text. — Raed Khalaf
– Raed Khalaf, Commented Jul 26, 2017 at 6:30
It is not working without that as well .. Mistakenly I have added it to the post — Adikari Nadeesha
– Adikari Nadeesha, Commented Jul 26, 2017 at 6:36
<input formControlName="startDate" type="date:'dd/MM/yyyy'" class="form-control" #date value="{{ date.value | date }}">, you can use the pipes and set it in the value of the input — Raed Khalaf
– Raed Khalaf, Commented Jul 26, 2017 at 6:45
The type of an input is only to instruct the browser what type of data it should expect. In case of the mobile browsers, this will change the keyboard setting to either numeric values or enable the web address version of your keyboard. It doesn't do anything with parsing or checking data, there's different methods to do so both in Angular and in HTML5. — Bjorn 'Bjeaurn' S
– Bjorn 'Bjeaurn' S, Commented Jul 26, 2017 at 6:52

Rahul Singh · Accepted Answer · 2017-07-26 06:57:11Z

1

Here are my working Plunker links for both Reactive as well as Template Driven forms

Reactive & Template

For Reactive

 <div class="form-group" formGroupName="address">
      <label for="">Date</label>
      <input type="date" class="form-control" formControlName="date">
    </div>

For Template Driven

  <div class="form-group">
    <label for="date">Date</label>
    <input type="date" class="form-control" ng-control="date" placeholder="date" required>
  </div>

answered Jul 26, 2017 at 6:57

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

Formatting date in HTML side with angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related