over 1 year ago

自置Angular2 Component - Date Picker

最近在練習用NG2(version 2.0.0)實作Todo-list,發現自己需要一個日期選擇器,網路上許多模組都需要JQuery,於是自幹一個
原始碼


先分享實作的功能

  1. 日期有區分週末與平常日,當天日期用黑字顯示,當hover時會變成紅底白字
  2. 實作Event Emitter,可以在Parent Component接收選擇日期
  3. 如果叫出日期選擇器後,點選範圍外會自動消失

使用方式為

  1. 先在Module中imports,接在Parent Component中宣告,我個人是在input綁定click event,點下去後顯示日期選擇器,我在input中使用單向綁定[value]="selectedDate"
    template:
    <input type="datetime" name="todo-time" id="todo-time" placeholder="Deadline" (click)="pickerShowup()" [value]="selectedDate"/>
    <yj-date-picker class="date-picker" [ngStyle]="{'visibility': pickerVisible}" (selectDateEvent)="selectDateHandle($event)"></yj-date-picker>
    //inside Parent Component class
    
    selectDateHandle(e) {
                //如果沒有選擇日期且關閉日期選擇器,則e為null
    
        //e的格式為{year: , month: , date: }
    
        this.selectedDate = e==null?this.selectedDate:e.year + '/' + e.month + '/' + e.date;
        this.pickerVisible = 'hidden';
    }
    
    
    

    pickerShowup(){
    this.pickerVisible = this.pickerVisible=='hidden'?'visible':'hidden';
    }


    1. 以下都是Date Picker Component中的事,簡單介紹一下
      ngOnInit(){
      //將日期初始化為今天!
      
      //主動觸發Event,這時候Parent Component初始值變成今天日期
      
      }
      
      
      

      calCalender(){
      //重新計算日期

      //先將該月的第一天還有相對應星期找出來(ex. 10/1禮拜三)

      //使用for loop開始填日期

      //頭尾會有一些沒填滿的,就用上個月末與下個月初開始填

      }


      以下紀錄一些心得:
      一.NgIf:NG2內建的structure directive,根據真偽值決定元素是否顯示,值得注意的是元素還是存在於DOM Tree中! 所以CSS的套用還是會引響到的,這點要特別注意!

← JS-VM internals, EventLoop, Async and ScopeChains 影片筆記 CSS-常用功能與佈局 →
 
comments powered by Disqus