角向2中的Datepicker問題

Question

我編寫了一個簡單的日期選取器程序。並且運作良好。但我現在面臨的問題是，如果我需要兩個datepickers，我需要寫兩個jQuery onChange事件。我需要的是使用相同的jQuery onChange事件的兩個輸入日期選擇器。在傳統的jQuery中，我可以使用類，但是我不知道如何在打字稿中實現它。任何意見將是有益的。謝謝。

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

您必須嘗試使用​​日期範圍選擇器。 我已經使用了相同的使用引導日期範圍選取器，你可以找到這個DateRangePicker鏈接

你需要在你的角2 ProjectConfig添加和導入daterangepicker.js和 daterangepicker.css。 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 
     });