angular2时间控件datepicker的使用

github下载地址：https://www.npmjs.com/package/angular2-simple-datepicker

使用代码：

<input #dateText class="form-control input-width col-sm-8" type='text' value={{selDate}} (change)="setInputDate($event)"/>
<date-picker 
       [value]="value"
       [minDate]="minDate" 
       [maxDate]="maxDate"
       [disableDays]="disableDays"
       [toContainPrevMonth]="toContainPrevMonth"
       [toContainNextMonth]="toContainNextMonth"
       (selectedDate)='setDate($event)'></date-picker>

初始化：

export class BusAdd {

    private selDate:string='MM/DD/YYYY';
    private minDate:string='01/01/2016';
    private maxDate:string='12/31/2017';
    private disableDays:Array<number>=[0,6];    //For Sunday and Saturday
    private toContainPrevMonth:boolean = false;
    private toContainNextMonth:boolean = false;
    private value:string='';

    setInputDate(event) {
        this.value = event.target.value;
    }
    setDate(date){
        this.selDate = date;
    }

}

datepicker.ts

import {Component,OnChanges,Input,EventEmitter} from '@angular/core';
import * as moment from 'moment';

@Component({
    selector: 'date-picker',
    template: `
            <a class="fa fa-calendar fa-lg calendar-icon" (click)='openDatePicker()'></a>
            <table id="wp-calendar" [style.display]="showDp">
               <caption>
                  <i class='fa fa-arrow-circle-left' style='float:left' (click)='setPrevMonth()'></i>
                  <label>{{currMonth}} {{currYear}}</label>
                  <i class='fa fa-arrow-circle-right' style='float:right' (click)='setNextMonth(this)'></i>
               </caption>
               <thead>
                  <tr>
                     <th *ngFor="let day of daysofWeek">{{day}}</th>
                  </tr>
               </thead>
               <tbody>
                  <tr *ngFor="let date of dates">
                     <td *ngFor="let d of date" (click)='setDate(d)'
                        [class.disabled]='d.disabled' 
                        [class.selDate]='d.selected'
                        [class.empty]='d.empty'>{{d.date}}</td>
                  </tr>
               </tbody>
            </table>
`,
   styles:[`
#wp-calendar {
    color: #666;
    font-size: 12px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    font-family: 'Open Sans';
}
 .fa-calendar{
   line-height: 34px;
    margin-left: 5px;
}
#wp-calendar a {    color: #467b89 }

#wp-calendar caption {
    background: #555555;
    color: white;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
    -webkit-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    border: 1px solid #555555;
    z-index: -99;
}

#wp-calendar thead th {
    font-size: 10px;
    padding: 5px 0;
    color: white;
    border-bottom: 1px solid #bbbbbb;
    background: #f96302;
    background: -webkit-gradient(linear, left top, left bottom, from(#f96302), to(#f96302));
    background: -moz-linear-gradient(top,  #f96302,  #f96302);
    text-align: center;
}

#wp-calendar tbody td {
    color: #666;
    cursor: pointer;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid;
    border-color: #fff #bbbbbb #bbbbbb #fff;
    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(white));
    background: -moz-linear-gradient(top,  white,  white);
}
#wp-calendar tbody td:hover {
    color: white;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid;
    border-color: #fff #bbbbbb #bbbbbb #fff;
    background: #555555;
    background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#555555));
    background: -moz-linear-gradient(top,  #555555,  #555555);    
}

#wp-calendar tbody td.pad {
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
    background: -moz-linear-gradient(top,  #f5f5f5,  #ececec);
}

#wp-calendar tfoot {
    color: #e0e0e0;
    font-size: 12px;
    text-align: center;
}

#wp-calendar tfoot tr {
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
    background: -moz-linear-gradient(top,  #f5f5f5,  #ececec);
}

#wp-calendar tfoot td {    padding: 10px 10px }

#wp-calendar tfoot a {
    color: #666;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#wp-calendar tfoot td#prev {    text-align: left }

#wp-calendar tfoot td#next {    text-align: right }

#wp-calendar #today {
    color: #fff;
    border: 1px solid #467b89;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    background: #6eafbf;
    background: -moz-radial-gradient(50% 50% 0deg,ellipse cover, #6eafbf, #569EB1);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 20, from(#6eafbf), to(#569EB1));
}

.display {
    display: block;
}

#wp-calendar tbody td.disabled {
    cursor: auto;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dedede));
    background: -moz-linear-gradient(top,  #ededed,  #dedede);
}
#wp-calendar tbody td.disabled:hover {
    color:#666;
}
#wp-calendar tbody td.empty {
    cursor: auto;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background: -moz-linear-gradient(top,  #fff,  #fff);
}
#wp-calendar tbody td.selDate {
    color: white;
    background: #f96302;
    background: -webkit-gradient(linear, left top, left bottom, from(#f96302), to(#f96302));
    background: -moz-linear-gradient(top,  #f96302,  #f96302);
}
`],
   outputs: ['selectedDate']
})

export class DatePickerComponent implements OnChanges{

   @Input() minDate:string;
    @Input() maxDate:string;
    @Input() disableDays:Array<number>;
    @Input() toContainPrevMonth:boolean;
    @Input() toContainNextMonth:boolean;
    @Input() value:string='';
   
   private daysofWeek:Array<String>;
   private currMonth:string;
   private currYear:string;
   private months:Array<String>;
   private dates:any=[];
   private completeDates:any;
   private tempArray:any;
   private prevMonth:string;
   private nextMonth:string;
   private prevYear:string;
   private nextYear:string;
   private showDp = 'none';
   public selectedDate = new EventEmitter();
      
   
   ngOnChanges() {
        this.daysofWeek = ['Su','Mo','Tu','We','Th','Fr','Sa'];
      this.months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      this.currMonth = this.months[new Date().getMonth()].toString();
      this.currYear = new Date().getFullYear().toString();
      //Set previous and next months
      this.prevMonth = this.months[new Date().getMonth()-1].toString();
      this.nextMonth = this.months[new Date().getMonth()+1].toString();
      this.prevYear = (parseInt(this.currYear) - 1).toString();
      this.nextYear = (parseInt(this.currYear) + 1).toString();
      //Set Date Array
        if (this.value!='') {
            let givenDate = moment(this.value,"MM/DD/YYYY",true);
            this.currMonth = this.months[givenDate.month()].toString();
            this.currYear = givenDate.year();
            this.dates = this.setDateArray(this.currMonth,this.currYear,givenDate.date());    
        }
        else {
            this.dates = this.setDateArray(this.currMonth,this.currYear,'');
        }
            
   }

   openDatePicker() {
      if (this.showDp=='none')
         this.showDp = 'inline-block';
      else
         this.showDp = 'none';  
   }

   setPrevMonth() {
      this.nextMonth = this.currMonth;
      this.currMonth = this.prevMonth;
      //Set new previous month
      let tempDate = new Date(this.currMonth+'/'+'1'+'/'+this.currYear);
        if (this.currMonth=='Jan'){
         //Set previous month to December
         this.prevMonth = this.months[11].toString();
      }
      else
         this.prevMonth = this.months[tempDate.getMonth() - 1].toString();
      if (this.currMonth=='Dec') {
         //Set current year to previous year
         this.currYear = this.prevYear;
         this.prevYear = (parseInt(this.currYear) - 1).toString();
         this.nextYear = (parseInt(this.currYear) + 1).toString();
      }  
      //Set Date Array to previous month
      this.dates = this.setDateArray(this.currMonth,this.currYear,'');
   }

   setNextMonth() {
      this.prevMonth = this.currMonth;
      this.currMonth = this.nextMonth;
      //Set new next month
      let tempDate = new Date(this.currMonth+'/'+'1'+'/'+this.currYear);
      if (this.currMonth=='Dec'){
         //Set next month to January
         this.nextMonth = this.months[0].toString();
      }
      else
         this.nextMonth = this.months[tempDate.getMonth() + 1].toString();
      if (this.currMonth=='Jan') {
         //Set current year to previous year
         this.currYear = this.nextYear;
         this.prevYear = (parseInt(this.currYear) - 1).toString();
         this.nextYear = (parseInt(this.currYear) + 1).toString();
      }  
      //Set Date Array to next month
      this.dates = this.setDateArray(this.currMonth,this.currYear,'');
   }

   setDateArray(month,year,date):any{
      
      let tempLastDate = this.decideDate(month,year);
      let temp = [];
      for (let i=1;i<=tempLastDate;i++){
            let currentDate = moment().year(year).month(month).date(i);
            let pastDate = moment(this.minDate);
            let futureDate = moment(this.maxDate).add(1, 'd');
            let dbld = false;
            //To disable Days - Index based 0-6
            for (let dayIndex=0; dayIndex<this.disableDays.length; dayIndex++){
                if (currentDate.day()==this.disableDays[dayIndex]) {
                    dbld = true;
                }
            }
            if (currentDate.isBefore(this.minDate, true) || currentDate.isAfter(futureDate, true)) {
                dbld = true;
            }
         if (i!=date)
            temp.push({'month':this.months.indexOf(month)+1,'date':i,'disabled':dbld,'selected':false,'empty':false}); 
         else
            temp.push({'month':this.months.indexOf(month)+1,'date':i,'disabled':dbld,'selected':true,'empty':false});  
      }
      this.completeDates = temp; 

      //Determine Date of First of the Month
      let firstDate = new Date(month+'/'+'1'+'/'+year);
      let lastDate = new Date(month+'/'+tempLastDate+'/'+year);
      
      //Prepend Prev Month Dates
      let spaceArray=[];
      if (firstDate.getDay()!=0){
         //Not Sunday
         let pMonth = this.months.indexOf(month)-1;
         let prevLast = this.decideDate(this.months[pMonth],year);
         //Fix it to display last date last
         for (let i=0;i<firstDate.getDay();i++)
         {
                if (this.toContainPrevMonth) {
                    spaceArray.push({'month':firstDate.getMonth()-1,'date':prevLast,'disabled':true,'selected':false,'empty':false});
                }
                else {
                    spaceArray.push({'month':'','date':'','disabled':false,'selected':false,'empty':true});
            }
            prevLast--;
         }
      }
      this.tempArray = spaceArray.reverse().concat(this.completeDates);
      //Append Next Month Dates
      if (lastDate.getDay()!=6){
         //Not Saturday
         let nIndex = 1;
         for (let i=6;i>lastDate.getDay();i--){
                if (this.toContainNextMonth) {
                    this.tempArray.push({'month':firstDate.getMonth()+1,'date':nIndex,disabled:true,'selected':false,'empty':false});
                }
                else {
                    this.tempArray.push({'month':'','date':'',disabled:false,'selected':false,'empty':true});
            }
            nIndex++;
         }
      }
      
      let tempDateChild=[];
      let tempDateMain=[];
      for (let date in this.tempArray){
         if ((parseInt(date)+1)%7 == 0){
            tempDateChild.push(this.tempArray[date]);
            tempDateMain.push(tempDateChild);
            tempDateChild=[];
         }
         else{
            tempDateChild.push(this.tempArray[date]);
         }
      }
      return tempDateMain;

   }

   decideDate(month,year):number{
      let last = 31;
      switch (month){
         case 'Feb':{
            //Feb
            last = 28;
            if ((parseInt(year)%4) == 0)
               last = last + 1;
         } 
         break;
         case 'Apr' : 
         case 'Jun' :
         case 'Sep' :
         case 'Nov' :{
            //April, June, September, November 
            last = 30;
         } 
         break;
         default : break;
      }
      return last;
   }

   setDate(sDate) {
      if (!sDate.disabled){
         if (sDate.date!=''){
            //Set the new date array with active date
            this.dates = this.setDateArray(this.currMonth,this.currYear,sDate.date);
                let selDate = moment().year(this.currYear).month(this.currMonth).date(sDate.date).format('MM/DD/YYYY',true);
            this.selectedDate.next(selDate);
         }
      }
   }

}