Datepicker Problem in Winkel 2

Question

Ich habe ein einfaches Date Picker-Programm codiert. und es funktioniert gut. aber das Problem, das ich jetzt gerade gegenüberstelle, ist, wenn ich zwei datepickers brauche, muss ich zwei jQuery onChange Ereignis schreiben. Was ich brauche, sind zwei Eingabe-Datums-Picker, die das gleiche jQuery onChange-Ereignis verwenden. Es ist möglich, in klassischen jQuery, wo ich Klasse verwenden kann, aber ich weiß nicht, wie es in Typoskript erreichen. Jeder Rat wäre hilfreich. Vielen Dank.

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

Sie müssen Datumsbereich auswählen zu verwenden versuchen. Ich habe das gleiche mit Bootstrap-Datum-Range Picker verwendet, für die Sie das DateRangePicker Link

Sie muss hinzufügen und importieren daterangepicker.js und daterangepicker.css in Ihrem Winkel 2 ProjectConfig finden. ts

Finden Sie unter Code für Ihre Referenz. Hoffe, es wird Ihnen auf bessere Weise helfen.

Werkzeuge/config/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. 
    } 
} 

app/Reise/Datum-range-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

app/Reise/Datum-range-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]); 
    } 
} 

danken Ihnen.

Answer 2

finden Sie unten Code für mehrere Datumskontrollen. Hoffe, das wird funktionieren.

demo.html

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

Demo.commponent

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