Angular2/jQuery UIのdatepickerを使う

キーワード

  • Angular2
  • jQuery UI
  • datepicker

したいこと

Angular2で作るページにjQuery UIのdatepickerを置きたい。

どうやって

用意するもの

  • index.html
  • datepicker用のDirective
  • 使う側のテンプレート

index.html

  <script src="assets/bracket/js/jquery.min.js"></script>
  <script src="assets/bracket/js/jquery-ui.min.js"></script>

あとたぶん、.cssも要るような気がする。

datepicker用のDirective

import {
  Directive, OnInit, Output,
  EventEmitter, ElementRef
} from '@angular/core';

declare var $: any;

@Directive({
  selector: '[datepicker]'
})
export class DatepickerDirective {

  @Output()
  change: EventEmitter<string> = new EventEmitter<string>();

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
    $(this.el.nativeElement).datepicker({
      closeText: "閉じる",
      currentText: "今日",
      monthNames: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
      monthNamesShort: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
      dayNamesShort: [ "日","月","火","水","木","金","土" ],
      dayNamesMin: [ "日","月","火","水","木","金","土" ],
      weekHeader: "週",
      dateFormat: "yy/mm/dd",
      firstDay: 0, // Sunday will be first of weeks
      isRTL: false,
      showMonthAfterYear: true,
      yearSuffix: "年",
      showButtonPanel: true,
      onSelect: (dateText) => {
        this.change.emit(dateText);
      }
    });
  }

}

大事なところは次。

外部ライブラリを使う

declare var $: any;

jQueryでもいい。

コンストラクタで要素を取得する

  constructor(
    private el: ElementRef
  ) { }

Directiveをつけた要素を取得できる。

$(element).datepicker()を呼ぶ

  ngOnInit() {
    $(this.el.nativeElement).datepicker({

生エレメントをjQueryに食わせて.datepicker()する。
index.htmlに書くだけだと、要素の後出しでdatepicker()が効いてないことになる。

使う側のテンプレート

<input datepicker type="text" placeholder="yyyy/MM/dd">

inputにDirective（「datepicker」）をくっつける。

ノート

datepickerに限らず、この方法でjQueryのいろいろができる。

参考

作成日 2016-10-26