Miss any of our Open RFC calls?Watch the recordings here! »

ng2-hz-datepicker

0.1.10 • Public • Published

ng2-hz-datepicker

An Angular2 powered horizontal date picker with horizontal scroll. Purely based on Angular2 & Typescript, no third party libraries involved (yet).

The picker is more suitable for mobile views as I needed this in one of my freelance projects (an angular2 based mobile-web). Couldn't find a suitable plugin so created my own ;)

Installation

To install this library, run:

$ npm install ng2-hz-datepicker --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import your library
import { HZDatePickerModule } from 'ng2-hz-datepicker';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // import the datepicker library
    HZDatePickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use the library component in app.component.html -->
<h1>
  {{title}}
</h1>
<hz-date-picker (onDateChange)="myDateChangeHandler($event)" [dpConfig]="myDatePickerConfig"></hz-date-picker>

Properties

property type description
dpConfig DpConfig (Interface) a configuration object to be provided for the datepicker

## Methods

method description
onDateChange an emmitter that is fired when a date button is clicked to select a different date

## DpConfig (Interface)

 btnClasses? : string,
 navBtnClasses?: string,
 showDays?: boolean,
 dayFormat?: string,
 selectedItemClass?: string,
 selectedDateFormat?: string
property type description
btnClasses string classes to be applied to individual date buttons
navBtnClasses string classes to be applied to navigation buttons (next month, prev month)
showDays boolean a flag which tells the datepicker whether the Days have to be shown or not
dayFormat string the day format for days to be displayed, defaults to 'E'. valid values are 'E', 'EEE' and 'EEEE'
selectedItemClass string a class(/classes) to be applied to the selected date button
selectedDateFormat string format of the selected date to be shown

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

Road Map

Unit Tests

Weeks View

Contribution

Please feel free to add features, different themes/UIs , perhaps weeks view etc. Submit a PR and lets make angular2 world more beautified ;)

License

MIT © Ahsan Ayaz

Keywords

Install

npm i ng2-hz-datepicker

DownloadsWeekly Downloads

44

Version

0.1.10

License

MIT

Last publish

Collaborators

  • avatar