# ngx-iq-datepicker

> Angular datepicker based on bootstrap 3

Latest version **2.2.0** (published 2017-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-iq-datepicker
pnpm add ngx-iq-datepicker
yarn add ngx-iq-datepicker
bun add ngx-iq-datepicker
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2017-10-26 |
| First published | 2017-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | diegofsza |
| Keywords | ngx, datepicker, date, bootstrap |

## Links

- npm: https://www.npmjs.com/package/ngx-iq-datepicker
- Repository: https://github.com/Innqube/ngx-iq-datepicker
- Homepage: https://github.com/Innqube/ngx-iq-datepicker#readme
- Issues: https://github.com/Innqube/ngx-iq-datepicker/issues
- npm.io page: https://npm.io/package/ngx-iq-datepicker

## Dependencies (1)

- [angular2-text-mask](https://npm.io/package/angular2-text-mask.md) ^8.0.2

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2017-10-26
- 2.1.0 — 2017-10-26
- 2.0.1 — 2017-08-01
- 2.0.0 — 2017-08-01
- 1.1.0 — 2017-06-26
- 1.0.0 — 2017-06-23

## README

# ngx-iq-datepicker

[![InnQUbe](http://www.innqube.com/assets/images/badge.svg)](http://www.innqube.com/)
[![Build Status](https://travis-ci.org/Innqube/ngx-iq-datepicker.svg?branch=master)](https://travis-ci.org/Innqube/ngx-iq-datepicker)
[![codecov](https://codecov.io/gh/Innqube/ngx-iq-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/Innqube/ngx-iq-datepicker)
[![Code Climate](https://codeclimate.com/github/Innqube/ngx-iq-datepicker/badges/gpa.svg)](https://codeclimate.com/github/Innqube/ngx-iq-datepicker)

Angular datepicker with bootstrap integration

* Bootstrap 3 based
* Forms integration: receives and returns Date (it can also parse ISO dates and UNIX timestamps)
* MIT License

How it looks
---
![Ngx IQ Datepicker Component](https://image.ibb.co/bs61sk/Ngx_Iq_Datepicker.png)


Usage example
---
```javascript

import { IqSelect2Module } from 'ngx-iq-datepicker';

@NgModule({
    declarations: [..],
    imports: [.., IqDatepickerModule, ...],
    providers: [..]
```

*html file*
```html
<form [formGroup]="form" class="form-horizontal">
    <div class="form-group">
        <label>Date</label>
        <iq-datepicker formControlName="date" [options]="options" [translations]="translations"></iq-datepicker>
    </div>
</form>
```
*Options*
```javascript
export class IqDatepickerOptions {
    size?: 'sm' | 'md' | 'lg'; // default 'md'
    calendarBtnClass?: string; // default 'btn btn-default'
    removeBtnClass?: string; // default 'btn btn-default'
    removeBtnVisible?: boolean; // default true
    removeBtnIcon?: string; // default 'glyphicon glyphicon-remove'
    calendarBtnIcon?: string; // default 'glyphicon glyphicon-calendar'
    horizontal?: boolean; // default false - Useful for horizontal-forms
    showPlaceholder?: boolean; // default true
    dateFormat?: 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy/MM/dd' | 'yyyy/dd/MM'; // default 'dd/MM/yyyy',
    time?: boolean; // default false - Allow to enter hours and minutes,
    minimalMode?: boolean; // hides the buttons. The remove button may become visible on hover. Useful for condensed layouts.
    inputCss?: string; // extra classes to add to the input component
}
```

*Translations*
```javascript
export interface IqDatepickerTranslations {

    daysAbrev: string[];
    monthNames: string[];

}
```

*Translations: English example*
```javascript
export class IqDatepickerEnglishTranslation implements IqDatepickerTranslations {

    daysAbrev = [
        'S',
        'M',
        'T',
        'W',
        'T',
        'F',
        'S'
    ];
    monthNames = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];
}
```

---
_Source: https://npm.io/package/ngx-iq-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._