Angular datepicker with bootstrap integration
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
.travis.yml
LICENSE
README.md
build-lib.js
karma.conf.js
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

ngx-iq-datepicker

InnQUbe Build Status codecov Code Climate

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

Usage example

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

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

html file

<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

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

export interface IqDatepickerTranslations {

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

}

Translations: English example

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'
    ];
}