Skip to content
This repository has been archived by the owner on Nov 7, 2023. It is now read-only.

Datepicker component to Angular2 - Using css to Bootstrap

Notifications You must be signed in to change notification settings

rodolfocop/ng2-datepicker-bootstrap

Repository files navigation

ng2-datepicker-bootstrap

Datepicker component to angular2

Hi everyone!

A very simple datepicker for Angular. You should use the version 2.x.x for Angular 2.x.x applications and the version 4.x.x for Angular 4.x.x applications.

Note: This component is ready to AoC (Ahead-of-Time) compilation. Below the operating instructions.

Installation

To install this library, run:

$ npm install ng2-datepicker-bootstrap --save

Use Example:

import {DatePickerModule} from 'ng2-datepicker-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [...],
    imports: [
        //... you others modules
        DatePickerModule,
        FormsModule
    ],
    providers: [...]
})
export class AppModule {}

Import to .angular-cli.json

  "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/moment/min/moment.min.js"
  ]

Using

  <app-datepicker [(ngModel)]="model.firstDate" [viewFormat]="'DD/MM/YYYY'" [modelFormat]="'YYYY-MM-DD'"  [id]="'firstDate'" [label]="'To'"></app-datepicker>

Available options:

  • viewFormat - Date format to display in the view. (default: 'DD/MM/YYYY')
  • modelFormat - Date format of the calendar. This will be bound to the model as the date's value. (default: 'YYYY-MM-DD')
  • id - Identify your attribute
  • label - Label display name
  • firstWeekdaySunday - Set to 'true' to set first day of the week in calendar to Sunday instead of Monday.
  • opened - Set to true to open the calendar by default

Questions? Open a Issue!