Skip to content

A Horizontal Datepicker for angular 2 with horizontal scrolling

Notifications You must be signed in to change notification settings

AhsanAyaz/ng2-hz-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 ;)

Live Demo

The live examples can be see here: https://ahsanayaz.github.io/ng2-hz-datepicker-example/

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

About

A Horizontal Datepicker for angular 2 with horizontal scrolling

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published