PrimeNG p-calendar – disableDate format

Issue I want to disable the dates from primeNG calendar. <p-calendar [(ngModel)]=”dateValue” dateFormat=”dd.mm.yy” [disabledDates]=”[here are the dates]”></p-calendar> For example I want to disable the dates from calendar except today and tomorrow. Solution Instead of using disabledDates, you should use minDate

Continue reading

PrimeNG calendar is not working as expected in Angular5

Issue I am using PrimeNG calendar for date of birth field. I am using yearNavigator and yearRange. The user can select max value is 12 years back before the current year. <p-calendar formControlName=”dob” class=”” id=”dob-registration” dateFormat=”dd/mm/yy” placeholder=”DD/MM/YYYY” readonlyInput=”true” [monthNavigator]=”true” [yearNavigator]=”true”

Continue reading

Event onValueChange on a date. PrimeNG 5.2.4

Issue I am trying to use the event onValueChange, according to the PrimeNG documentation, but it does not work. View <p-calendar (onValueChange)=”changeFechaFinEstimada()” [(ngModel)]=”empleado.fechaFinEstimada” [locale]=”es” dateFormat=”dd-mm-yy” [showIcon]=”true” name=”fechaFinEstimada” id=”field_caducidad” [monthNavigator]=”true” [yearNavigator]=”true” yearRange=”2018:2030″></p-calendar> Controller changeFechaFinEstimada() { console.log(empleado); } Solution onValueChange event is

Continue reading

Change style of time picker in primeng calendar

Issue I’m trying to remove the padding and set the font style to smaller in the time-picker used in primeng calendar for angular 7. <p-calendar [ngModel]=”xxx” timeOnly=”true” [(hourFormat)]=”hourFormat” [(dateFormat)]=”timeFormat” [showIcon]=”false” [style]=”{‘display’:’initial’}” [inputStyle]=”{‘border-width’:’1px 1px 1px 1px’, ‘width’:’100%’,’height’:’25px’}”></p-calendar> but it’s not applying.

Continue reading

PrimeNG TimeOnly Calendar: Cannot Select default time intuitively

Issue I am using this PrimeNG timeonly calendar: <p-calendar id=”startHour” name=”startHour” [defaultDate]=”startHourDefault” [(ngModel)]=”startHourValue” [timeOnly]=”true” hourFormat=”12″ [inline]=”false” placeholder=”Select start hour” [disabled]=”IsDisabled”></p-calendar> I am setting start default hour to 9:00 AM var today = new Date(); this.startHourDefault= new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9,

Continue reading

Why am I obtaining this strange behavior trying to use different color for different event type dragged into a PrimeNG FullCalendar component?

Issue I am working on an Angular application using PrimeNG Full Calendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar That is based on the Angular FullCalendar component, this one: https://fullcalendar.io/ Here you can find my entire code: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/ I am finding some difficulties

Continue reading

Angular unit testing prime ng calendar

Issue Inside a unit test, when I have a regular element I can set its value, trigger a change event and verify the form value matches like so: const hostElement = fixture.nativeElement; const userIdSelect: HTMLInputElement = hostElement.querySelector(‘select[formcontrolname=”userId”]’); userIdSelect.value = ‘myUser’;

Continue reading

Child doesn't render template passed by parent

Issue Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree <div class="nodes-panel"> <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate"> </ils-tree> </div> <ng-template #nodeTemplate> <ng-template let-node pTemplate="default"> <p class="node-type">{{node.data.nodeType}}</p> <p class="node-name">{{node.data.name}}</p> </ng-template> <ng-template let-node

Continue reading

<p-fileUpload> Change icon on PrimeNG on file upload

Issue Is it possible to change the icon on choose button on file upload ? In my case it is always “+”. <p-fileUpload class=”btn-primary” auto=”true” mode=”basic” name=”demo[]” chooseLabel=”Upload” [url]=”apiImageLocation” accept=”image/*” maxFileSize=”2000000″ (onUpload)=”onUploadImageSuccess($event)” (onError)=”onUploadImageError($event)”> </p-fileUpload> Solution You can override font awesome

Continue reading

Hide Primeng datatable paginator when no records

Issue I have added Datatable from primeng-v2.0.4. <p-dataTable [value]=”tableData” [rows]=”rows” [paginator]=”true” [resizableColumns]=”true” [tableStyleClass]=”table-wrap” [rowsPerPageOptions]=”[5,10,20]”> : : </p-dataTable> I saw option [paginatorAlwaysVisible]=”false” in one of the forums, but that attribute does not seem to be available for this version of primeng.

Continue reading

primeNG multiselect on change not triggered on chips removal

Issue below is a sample of my code. A primeng multiselect is the source of a primeng dropdown: HTML: <p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip" (onChange)="onElementChange($event)"></p-multiSelect <p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID" placeholder="Select an Element"></p-dropdown> ts: onElementChange(event) { this.availableElements = []; this.availableElements =

Continue reading

Unable to display PrimeNg toasts when switching pages

Issue I’m trying to use the PrimeNg Toasts to confirm the deletion of one user. Basically, here is my code: deleteUser() { this.confirmationService.confirm({ message: this.translateService.instant(‘common.messages.deletion-confirm’), header: this.translateService.instant(‘common.messages.deletion-title’), icon: ‘fa-light fa-triangle-exclamation’, acceptLabel: this.translateService.instant(‘common.messages.ok’), rejectLabel: this.translateService.instant(‘common.messages.cancel’), rejectButtonStyleClass: ‘p-button-secondary p-button-text’, accept: async ()

Continue reading

How to programmatically select item in primeng p-menu?

Issue Any idea how to programmatically select an item in a primeng p-menu? Code is straightforward: <p-menu #menu [popup]=”true” [model]=”configMenuItems” appendTo=”body” [style]=”{‘text-align’: ‘left’}”></p-menu> <button type=”button” class=”btn btn-link” pTooltip=”Select Site” tooltipPosition=”left” onclick=”this.blur();” (click)=”menu.toggle($event)”> {{selectedSite.DisplayName}} <span class=”caret”></span> </button> Solution Judging by the

Continue reading

primeng issues with rc5

Issue After upgrading to rc5, and reinstalling primeng with the new release, I receive the following error: zone.js?1472019041780:484 Unhandled Promise rejection: Template parse errors: Can’t bind to ‘icon’ since it isn’t a known property of ‘button’. (“ver’:hovered,’ui-state-focus’:focused,’ui-state-disabled’:disabled}” >][icon]=”icon” pButton *ngIf=”showIcon”

Continue reading