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

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