Skip to content

doenikoe/az-idatepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM

npm version Known Vulnerabilities mit license pull request is welcome

screenshot

az-idatepicker

Datepicker component for angular 2. See it in action here: https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview

Installation

This components require moment.js:

npm install moment --save

Install az-idatepicker:

npm install az-idatepicker --save

Usage

import IDatePickerModule into your app module:

import {IDatePickerModule} from 'az-idatepicker';

@NgModule({
    imports: [
        IDatePickerModule,
        ...
    ],
    declarations: [
        ...
    ],
    bootstrap: [...]
})

Call from your template:

<az-idatepicker
    id="myInput"
    [name]="'myInputName'"
    [placeholder]="'Testing'"
    [dayLabels]="['S','S','R','K','J','S','M']"
    [locale]="'id'"
    [format]="'YYYY-MM-DD'"
    [idatePickerBinding]="model.date"
    (onSelect)="setDate($event)"
></az-idatepicker>    

API

Attributes

Parameter Type Is Required Default Value Description
id string no - ID of component
name string no - Name of component
placeholder string no - Text to shown if the datepicker is empty
dayLabels Array yes - Day labels visible at header, it started from monday and each symbol separated by 'dash'
locale string no en-ca Use momentjs (http://momentjs.com/) locale files
format string no YYYY-MM-DD The date format, default to 'YYYY-MM-DD'
idatePickerBinding any no - Binding for ngModel
sundayHighlight boolean no false If true then sunday will have red color
minYear number no 1970 Minimum year
maxYear number no 2020 Maximum year
disableDays Array no [] Disable dates that in the defined day. Day must defined in ordered index (0=sunday, 1=monday, 2=tuesday, 3=wednesday, 4=thursday, 5=friday, 6=saturday)
minDate, maxDate moment no - Restrict the range of selectable date with 'minDate' and 'maxDate'

Callback Events

Name Return Type Description
getSelectedDate string Return selected date

Exposed Method

You can use template reference variable to call exposed methods in az-idatepicker component Example:

<button (onclick)="elem.openDatePicker()">Open IDatePicker</button>

<az-idatepicker #elem
    id="myInput"
    [name]="'myInputName'"
    [placeholder]="'Testing'"
    [dayLabels]="'S-S-R-K-J-S-M'"
    [locale]="'id'"
    [format]="'YYYY-MM-DD'"
    [idatePickerBinding]="model.date"
    (onSelect)="setDate($event)"
></az-idatepicker>
Name Args Description
openDatePicker - Open date picker
closeDatePicker - Close date picker

Issues

If you found any bugs please do not hesitate to give us feedback by reporting issue in our github repository

Care for pull request ?

This page explain how to prepare your local development environment. Let's start contributing in az-idatepicker development.

Star

👉 Support us by give a star ⭐

License

  • License: MIT

Author

  • Author: doenikoe