angular2时间控件datepicker的使用

来源：互联网发布：张博士医考中心网络课编辑：程序博客网时间：2024/06/06 14:10

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

0 0