Primeng: Calendar fills string var with date instead time

[Gwulior]

Hello, i have a field like below

<p-calendar [(ngModel)]="endTime" dataType="string" timeOnly="true" hourFormat="24"
[showIcon]="true"></p-calendar>

I choose a time, and when i grab my model var, i see it is filled with "11/21/2016" instead "20:46" i can see in the field.

[gkallergis]

I also have a similar problem! Setting the control as

<p-calendar ... dataType="string" dateFormat="M dd, yy" [showTime]="true" [hourFormat]="24" ...

results in my model having just the date instead of both date and time! :disappointed:

As I see in the sources here, the date is formatted based on the dateFormat chosen for display. I would suggest an extra attribute to control the format of the date sent to the server as in many cases a timestamp is send to the back end instead of a human readable format.

[gavrilas]

I also have a similar problem!

There is no time information in string dataType.

[victorcg88]

Same problems. The simplest example:

<p-calendar [(ngModel)]="mySelection" dataType="string" [showTime]="true"></p-calendar
<span>Display the date and time selected: {{mySelection}}</span>

It shows on calendar input box correct selection ('01/18/2017 12:13') but fails showing on span 01/10/2017.

Kind of a bug? Any workaround?

_EDIT: Bug found on primeng v1.1.1_

[ben2323]

Same issue over here. Any news ?

[niravpatel9898]

<p-calendar [(ngModel)]="time_24h" [timeOnly]="true" [showTime]="true" [hourFormat]="24" (onSelect)="onChangeTime($event)"></p-calendar>

onChangeTime($event:any){
    console.log(this.convertTime($event));
}

convertTime(str:string) {
      var date = new Date(str),
      mnth = ("0" + (date.getMonth()+1)).slice(-2),
      day  = ("0" + date.getDate()).slice(-2),
      hours  = ("0" + date.getHours()).slice(-2),
      minutes = ("0" + date.getMinutes()).slice(-2);
      return [hours, minutes].join(":");
}

The console.log above is giving me the correct 24hr formatted time :)

[victorcg88]

Yes, but that is not a example with dataType="string" and [timeOnly]="false"

[gourab-dilu]

showTime="true" hourFormat="24" showIcon="true"
[minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"
(ngModelChange)="fromToDateChange()">
Try this it will work

[Bengejd]

Everyone is throwing out different functions that accomplish the issue at hand, but why over complicate things, when Javascript does this naturally for us?

Just use modelVar.toLocaleTimeString('en-GB');

Make sure you're also setting the modelVar = new Date(); somewhere in your component.

While @niravpatel9898 's solution does technically work (Though it will trigger every time you change the time, like trying to set the minutes for example), it's reinventing the wheel, and unnecessary.

edit: If you want to get just the date instead, use: modelVar.toLocaleDateString();

[cagataycivici]

Please provide a plunkr that replicates this and we'll reopen.

http://plnkr.co/edit/VZbdZfQ7SuTV87tTkbYR?p=preview

I can't seem to replicate with 4.0.2