<p align="center">
  <img src="https://cloud.githubusercontent.com/assets/1796022/18261971/a8dc6eda-73fd-11e6-8c49-e15c435f6b5f.png">
</p>

<p align="center">
  <h3 align="center">Angular UI Dev Kit</h3>
</p>

<p align="center">
  <a href="http://ng2-ui-kit.jankuri.com">Demo</a>
</p>

## Quick Start

### 1. Install

**ng2-ui-kit** is available on **npm** package manager.

```
npm install ng2-ui-kit --save
```

### 2. Import

There's only one import that's need to be done since Angular NgModule pattern. 

```ts
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UI_KIT } from 'ng2-ui-kit';

@NgModule({
  declarations: [
    AppComponent,
    UI_KIT
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

After that, you'll have **ng2-ui-kit** available app-wide.


## Modules

### Calendar (ui-kit-calendar)

#### Usage
```html
<ui-kit-calendar [(ngModel)]="obj.date"></ui-kit-calendar>
```
#### Input Options
- `[opened]` **boolean** If true, calendar will be init as opened. Default `false`
- `[format]` **moment.js format** If specified, model value will be customly formatted. Default: `'YYYY-MM-DD'`
- `[viewFormat]` **moment.js format** Rendeder value format. Default `'D MMMM YYYY'`
- `[firstWeekdaySunday]` **boolean** If `true`, days will be rendered as first weekday Sunday. Default `false`

## Example Form

![screen shot 2016-09-07 at 17 17 08](https://cloud.githubusercontent.com/assets/1796022/18318256/4ec44af6-7521-11e6-997d-3968209e66ac.png)
