CODEWITHSUNDEEP
angularprimeng
maxx
maxx

Reputation: 145

Angular PrimeNG datetimepicker

I use component calendar from PrimeNG 5.0.1, Angular 5.1, which allows to choose both date and time:

<p-calendar [(ngModel)]="startAnalyzeModel" name="startAnalyze" [showTime]="true" [dateFormat]="dateFormat" disabled="true" [locale]="ru"></p-calendar>

But timepicker is frozen on time page was reloaded. Is it possible to update time value everytime when picker is shown? I have not found any parameter is in charge for this.

Upvotes: 4

Views: 23550

Answers (2)

maxx
maxx

Reputation: 145

To resolve this problem, I use this code:

import { Calendar } from 'primeng/primeng';
...
@ViewChildren(Calendar) public cals: Calendar[];
...

    ngAfterViewInit() {
        this.cals.forEach(calendar => {
          let elem = calendar.inputfieldViewChild.nativeElement;
          elem.addEventListener('click', () => { 
            if (!elem.value) {
              calendar.initTime(new Date());
            }
          });
        });
      }

Upvotes: 0

Andriy
Andriy

Reputation: 15442

I think you are just missing font awesome included in your app. In order to change hours or minutes their arrows up or down need to be clicked. These arrows are rendered using awesome icons, something like:

<div class="ui-hour-picker">
  <a href="#" (click)="incrementHour($event)">
    <span class="fa fa-angle-up"></span>
  </a>
  <span [ngStyle]="{'display': currentHour < 10 ? 'inline': 'none'}">0</span>
  <span>{{currentHour}}</span>
  <a href="#" (click)="decrementHour($event)">
    <span class="fa fa-angle-down"></span>
  </a>
</div>

(Reference)

Arrows classes: fa fa-angle-up or fa fa-angle-down

This is how it looks without font loaded: enter image description here

Please note that minutes number is displayed within <span> HTML element (not <input>), thus it is not editable.

If I load awesome fonts , then it looks like: enter image description here

Font awesome may be added in your .angular-cli.json file under styles section.

I created a stackblitz: https://stackblitz.com/edit/angular-7bv266?file=app%2Fapp.component.ts.

If missing awesome font is not your case, please update my stackblitz and I will try to help.

UPDATE

In order to permanently set hours and minutes in the time picker we can use defaultDate calendar's input. In my example, I set it to current date and time 10:15, so it always show 10:15 unless changed explicitly.

HTML:

<p-calendar [(ngModel)]="startAnalyzeModel" 
            [defaultDate]="defaultDate" 
            name="startAnalyze" 
            [showTime]="true" 
            [dateFormat]="dateFormat" 
            [locale]="ru"></p-calendar>

TS:

...
defaultDate = new Date();
...

constructor() {
  this.defaultDate.setHours(10);
  this.defaultDate.setMinutes(15);
}

defaultDate may be set to any desired date.

I updated stackblitz as well.

Upvotes: 2

Related Questions