Code Monkey home page Code Monkey logo

ngx-iq-datepicker's Introduction

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

ngx-iq-datepicker's People

Contributors

diegofsza avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

ngx-iq-datepicker's Issues

Request : Day of week start

Hey.
nice calender popup ๐Ÿ‘
I just have a request that one of the options is to change the day that the week starts with.
Right now it just startes with sunday, but i would like it to start with monday ๐Ÿ˜„

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.