角度2のDatepickerの問題

Question

シンプルな日付ピッカープログラムをコーディングしました。そのうまくいっている。私が2つのdatepickersが必要な場合、私は2つのjQuery onChangeイベントを記述する必要があります。私が必要とするのは、同じjQuery onChangeイベントを利用する2つの入力日付ピッカーです。古典的なjQueryではクラスを使用することができますが、typescriptでそれを達成する方法はわかりません。どんな助言も役に立つでしょう。ありがとうございました。

app.component.ts：

@ViewChild('dateselect') ds: ElementRef; 
    ngAfterViewInit() { 
    jQuery(this.ds.nativeElement) 
     .on('change',() => { 
     jQuery(this.ds.nativeElement).attr("data-date", moment(jQuery(this.ds.nativeElement).val(), "YYYY-MM-DD").format('DD MMM YYYY')); 

     }); 
    } 

app.component.html

<input type="date" #dateselect name="from" data-date-format="DD/MMM/YYYY"> 
<!--<input type="date" #dateselect name="to" data-date-format="DD/MMM/YYYY">--> 

Answer 1

あなたは、日付範囲ピッカーを使用しようとしなければなりません。 は、私はあなたがあなたの角度の2 ProjectConfigにdaterangepicker.jsと daterangepicker.cssを追加し、インポートする必要があり、このDateRangePickerリンク

を見つけることができたため、同じ使用してブートストラップ日付範囲ピッカーを使用していました。 ts

以下のコードを参考にしてください。 それはより良い方法であなたを助けてくれることを願っています。

ツール/設定/ project.config.ts

import { join } from 'path'; 
import { SeedConfig } from './seed.config'; 

export class ProjectConfig extends SeedConfig { 
    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 

    constructor() { 
    super(); 
    this.NPM_DEPENDENCIES = [ 
     ...this.NPM_DEPENDENCIES,    
     { src: '../../src/client/js/jquery-1.11.1.min.js', inject: 'libs'}, 
     { src: '../../src/client/js/moment.min.js', inject: 'libs'}, 
     { src: '../../src/client/js/daterangepicker.js', inject: 'libs' }, 
     { src: '../../src/client/css/daterangepicker.css', inject: true }, 
    ]; 

    // Add `local` third-party libraries to be injected/bundled. 
    } 
} 

アプリ/旅行/日付範囲-picker.html

<div class="form-group"> 
       <label class="col-sm-4 col-md-4 control-label required-field"><i class="fa fa-suitcase" aria-hidden="true"></i> Travel Dates:</label> 
       <div class="col-sm-8 col-md-4 travel-plan-div"> 
        <div class="input-group date col-sm-6 from-date" id="fromDate"> 
         <input type="text" class="form-control fromdate" placeholder="Start journey" required [(ngModel)]="application.journeyStartDate" [readonly]="true" 
           [ngClass]="{'required-input-field': (applicationform.submitted) && (!startDate.valid)}" 
           id="startDate" name="startDate" #startDate="ngModel"> 
        </div> 
        <div class="input-group date col-sm-5 to-date" id="toDate"> 
         <input type="text" class="form-control todate" placeholder="End journey" required [(ngModel)]="application.journeyEndDate" [readonly]="true" 
           [ngClass]="{'required-input-field': (applicationform.submitted) && (!endDate.valid)}" 
           id="endDate" name="endDate" #endDate="ngModel"> 
        </div> 
        <span class="input-group-addon date-addon"> 
         <span class="fa fa-calendar"></span> 
        </span> 
       </div> 
       <span id="labelNoOfDays" class="travel-days hidden-sm hidden-xs" *ngIf="application.journeyDays > 0">Trip of {{application.journeyDays}} days</span> 
      </div> 

daterangepicker

アプリ/旅行/日付範囲-picker.component

import {Component, OnInit, Input, Output, EventEmitter, Directive } from '@angular/core'; 
import {ActivatedRoute, Params, Router } from '@angular/router'; 
import {AjaxLoader } from '../shared/services/ajax-loader'; 
declare var jQuery: any; 

@Component({ 
    moduleId: module.id, 
    selector: 'date-range-picker', 
    templateUrl: 'date-range-picker.html', 
    providers: [CommonService, AjaxLoader] 
}) 

export class DateRangePickerComponent { 

ngAfterViewInit() { 
     this.setDatepicker(); 
    } 

setDatepicker() { 
    var today = new Date(); 
    let dayDiff: number = 0; 

    //jQuery('input[name="startDate"],[name="endDate"], .fa-calendar').daterangepicker({ 
    jQuery('.fa-calendar').daterangepicker({ 
     autoUpdateInput: false, 
     autoApply: false, 
     minDate: today, 
     startDate: jQuery('input[name="startDate"').value, 
     endDate: jQuery('input[name="endDate"').value, 
     showDropdowns: true, 
     opens: 'left', 
     linkedCalendars: false, 
     locale: { 
      cancelLabel: 'Clear' 
     } 
    }); 

    jQuery('.fa-calendar').on('apply.daterangepicker', (ev: Event, picker: any) => { 
     this.application.journeyStartDate = picker.startDate.format('DD/MM/YYYY'); 
     this.application.journeyEndDate = picker.endDate.format('DD/MM/YYYY'); 
     this.application.journeyDays = this.calculateJourneyDays(this.getDate(this.application.journeyStartDate), this.getDate(this.application.journeyEndDate)); 
    }); 

    jQuery('.fa-calendar').on('cancel.daterangepicker', (ev: Event, picker: any) => { 
     this.application.journeyStartDate = null; 
     this.application.journeyEndDate = null; 
     this.application.journeyDays = 0; 
    }); 
    } 

getDate(dateInString: any): Date { 
    let array = dateInString.split('/'); 
    return new Date(array[1] + "/" + array[0] + "/" + array[2]); 
    } 
} 

ありがとうございました。

Answer 2

複数の日付のコントロールについては、下記のコードをご覧ください。これがうまくいくと思っています。

demo.html

<input type="text" class="mydate" name="date1" placeholder="first date"> 
<input type="text" class="mydate1" name="date2" placeholder="second date"> 

デモ。commponent

jQuery('.mydate, .mydate1').daterangepicker({ 
      singleDatePicker: true, 
      showDropdowns: true 
     });