Angular で datetimepicker を使用する

● Angular で datetimepicker を使用する

またバリデーションにも対応させます。


* jquery , jquery-datetimepicker をインストール

npm install jquery --save
npm install jquery-datetimepicker  --save

* angular.json に 追加

            "styles": [
              "src/styles.scss" ,
              "node_modules/jquery-datetimepicker/build/jquery.datetimepicker.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js" ,
              "node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.min.js"
            ]


* app/app.component.ts に追加

import { Component } from '@angular/core';

// jquery
declare var $: any;


* 表示するページ page01 を新規作成

ng g component page01

1.(ルーティング) * app/app-routing.module.ts にルーティングを追加

const routes: Routes = [
  { path: 'page01', component: Page01Component }, 
  { path: '**', component: Page01Component }, // 追加
];

2.(html) app/page01/page01.component.html を以下の内容で保存

<input type="text" class="form-control jquery-datetimepicker" name="test-date" formControlName="datepicker" autocomplete="off">
<pre class="debug">
{{ registerForm.value | json }} <br>
Validation: {{ registerForm.get( 'datepicker' ).valid }}
</pre>

3.(TypeScript) app/page01/page01.component.ts を以下の内容で保存

import { Component, OnInit } from '@angular/core';

// jquery
declare var $: any;

@Component({
  selector: 'app-page01',
  templateUrl: './page01.component.html',
  styleUrls: ['./page01.component.scss']
})
export class Page01Component implements OnInit {
  constructor() { }
  ngOnInit() {

    // ===== jquery-datetimepicker =====
    let _this = this;
    $.datetimepicker.setLocale('ja'); // 日本語化
    $('input.jquery-datetimepicker').datetimepicker({
      lang: 'ja',
      timepicker: false,
      format:'Y-m-d',
      onSelectDate:function( date ){
        var year = date.getFullYear();
        var  month = ("0"+(date.getMonth() + 1)).slice(-2);
        var  date =  ("0"+date.getDate()).slice(-2);
        var date_formatted = year + '-' + month + '-' + date;
        _this.registerForm.get('datepicker').setValue( date_formatted );
      }
    });
    // ===== jquery-datetimepicker =====

  }
}

これでコンポーネントは完成です。

jquery-datetimepicker で日付を選択時に、_this.registerForm.get('datepicker') にも値が反映されます。

No.1708
02/21 15:36

edit