home wiki.fukuchiharuki.me
Menu
Top/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();

  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のいろいろができる。

↑

参考†