É um calendar do PrimeNG já em português.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.angular-cli.json
.editorconfig
.gitignore
README.md
index.ts
karma.conf.js
ng-package.json
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

p-calendar-ptbr

É um datepicker do PrimeNG já em português. Está é uma alternativa para o p-calendar do PrimeNG e suporta a maioria de suas propriedades.

It is a datepicker of PrimeNG in portuguese. This is an alternative for PrimeNG's p-calendar and supports the most of its properties.

Getting started (Prerando o uso)

  • Install PrimeNG

npm install primeng --save

  • Install Font-Awesome

npm install font-awesome --save

  • Configure required styles at the styles section

"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  //...
],

  • Install this component

npm install p-calendar-ptbr --save

  • and then from your Angular AppModule:

import { PCalendarPtbrModule } from 'p-calendar-ptbr';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   PCalendarPtbrModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})

Basic usage (Uso básico)

Example 1:

<p-calendar-ptbr></p-calendar-ptbr>

Example 2:

<p-calendar-ptbr [yearNavigator]="true" yearRange="1900:2018" [monthNavigator]="true"></p-calendar-ptbr>

All properties supported (Todas as propriedades suportadas)

Pode ser usado como um p-calendário original do PrimeNG, a principal diferença entre estes, é que o p-calendar-ptbr precisa que quando a propriedade passada for um valor diferente de uma string ou número você faça um binding nessa propriedade, passando-a dentro dos colchetes '[]'.

Desta forma, booleanos, objetos e outros, precisam que a propriedade esteja dentro de colchetes.

Todas as propriedades suportadas estão no exemplo abaixo.

It can be used like a original PrimeNG's p-calendar, the main different between these, is that the p-calendar-ptbr needs that when the property passed is a value different of a string or number, it needs that you make a binding at this property, passing it inside of brackets '[ ]'.

This way, booleans, objects, and any others, need tha the property is into a brackets.

All properties supported are listed bellow.

Example 1:

<p-calendar-ptbr [showButtonBar]="false" [showTime]="false" [yearNavigator]="true" yearRange="1900:2018" [showIcon]="true" [monthNavigator]="false" [readonlyInput]="true" placeholder="Seu texto" clearButtonStyleClass="ui-secondary-button" todayButtonStyleClass="ui-secondary-button" maxDateCount="3" selectionMode="multiple" inputId="my-Date" [disabled]="false" [inline]="false" [minDate]="data" [maxDate]="data" [disabledDates]="arrayDatas" disabledDays="[4,5]" [timeOnly]="false" [required]="true"> </p-calendar-ptbr>

How to get a returned value (Como pegar o valor retornado)

Este componente funciona como um componente pai para o p-calendar, de modo que o valor assumido pelo componente filho deve passar para o pai através de um event-binding. Eu nomeei esse EventEmitter para "value", e pode ser capturado de uma das seguintes maneiras:

This component works like a father component for the p-calendar, so the value took by the son component should pass to father through of a event binding. I named this EventEmitter for "value" and it can be catch in one of the following ways:

Calling a method in your component and passing the $event (Chamando um método no seu componente e passando o valor retornado no $event)

<p-calendar-ptbr (value)="aoAdicionar($event)"></p-calendar-ptbr>

Passing to variable in your component (Passando para uma variável em seu componente)

<p-calendar-ptbr (value)="data = $event"></p-calendar-ptbr>

Passing to a property of an object in your component (Passando para uma propriedade de um objeto no seu componente)

<p-calendar-ptbr (value)="cliente.dataCadastro = $event"></p-calendar-ptbr>

Author

  • Daniel Oliveira