p-calendar-ptbr v1.0.8

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