input type="date" : The value don't show up at start

[samdidos]

First, I would like to thank and congratulate the team for your work, Clarity is a pretty cool library.

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

I have an object with an existing date attribute in it, and I want it to be modified

<input type="date" name="dateToModify" [(ngModel)]="myObject.date">

I expect to show the actual date value and let me change it with the date picker.

Actual behavior

When a value already exists, the value don't appear in the input field. It only appears once I set it.

Reproduction of behavior

• Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:

  Here's my Plunker. In the Plunker, I've set the date to a new Date (now), and we see that the date is well shown if I use an Angular2 date pipe, but it doesn't show in the input field.

  Environment details

• Angular version: 4.0.1

• Clarity version: 0.9.0

• OS and version: Linux Ubuntu 16.04

• Browser: Chrome 57

[Jinnie]

Hi @samdidos, This is an Angular2 issue, not Clarity related. Many reports can be found on the topic. The cleanest and easiest solution I've seen so far is to change the binding like this:

    `<input type="date"  [ngModel]="myDate | date:'yyyy-MM-dd'" 
                 (ngModelChange)="myDate = $event">`

Otherwise you have to manually parse the date you want to preset to the yyyy-MM-dd format, as the Angular component only recognises this format, not the generic Date object.

[youdz]

Thanks @Jinnie For answering this. 😄

[samdidos]

@Jinnie Thank you for the tip!

[samdidos]

It works, thanks a lot! Can you help me on another similar matter? I would like the Clarity date picker to show the date in format "dd/mm/yyyy" instead of the default format "mm/dd/yyyy", is that possible?

[mathisscott]

@samdidos : There is no datepicker component in Clarity (yet). See #474

What you are likely seeing is the built-in Chrome datepicker that is tied to the date inputs.

See MDN article for more info on that

[samdidos]

Ok thx a lot @mathisscott I haven't realised that!

[jatinpatel136]

@Jinnie Thanks alot!

[ganesh190589]

Try this. Working fine <input type="date" class="form-control" name="startDate" value="{{admissionDetail.startDate | date:'yyyy-MM-dd'}}" formControlName="startDate" [(ngModel)]="admissionDetail.startDate">

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.