Datepicker issue in angular 2

Question

I have coded a simple date picker program. and its working well. but the problem i'm facing right now is, If i need two datepickers, i need to write two jQuery onChange event. what I need is two input date pickers that utilizes the same jQuery onChange event. It's possible in classic jQuery where i can use class, but i don't know how to achieve it in typescript. Any advice would be helpful. Thank you.

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

please find below code for multiple date controls. Hope this will work.

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
        });

Answer 2

You must be trying to use Date Range Picker. I have used the same using bootstrap date-range picker for which you can find this DateRangePicker link

You needs to add and import daterangepicker.js and daterangepicker.css in your angular 2 ProjectConfig.ts

Find below code for your reference. Hope it will helps you in better way.

tools/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/travel/date-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/travel/date-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]);
  }
}

Thank You.