0

I am using datarangepicker for to work with dates.

I have two components, and each component has a different range of date settings, but I can not get them to be different for each component, all of them are taking the configuration of component "main1.component.ts".

This is the code ts:

main1.component.ts

    import { Daterangepicker, DaterangepickerConfig } from 'ng2-daterangepicker';
    constructor(private daterangepickerOptions: DaterangepickerConfig) {
      this.daterangepickerOptions.settings = {
        locale: { format: 'DD/MM/YYYY HH:mm' },
        alwaysShowCalendars: true,
        timePicker: true,
        timePicker24Hour: true,
        timePickerSeconds: false,
        timePickerIncrement: 1,
        ranges: {
            'Yesterday': [moment().subtract(1, 'day'), moment()],
            'Last week': [moment().subtract(7, 'day'), moment()],
            'Last month': [moment().subtract(1, 'month'), moment()],
            'Last 2 months': [moment().subtract(2, 'month'), moment()]
        }
      };
    }

main2.component.ts

import { Daterangepicker, DaterangepickerConfig } from 'ng2-daterangepicker';
    constructor(private daterangepickerOptions: DaterangepickerConfig) {
      this.daterangepickerOptions.settings = {
        locale: { format: 'DD/MM/YYYY' },
        alwaysShowCalendars: true,
        timePicker: false,
        timePicker24Hour: true,
        timePickerSeconds: false,
        timePickerIncrement: 5,
        ranges: {
          'Yesterday': [moment().subtract(1, 'day'), moment()],
          'Last week': [moment().subtract(7, 'day'), moment()],
          'Last month': [moment().subtract(1, 'month'), moment()],
          'Last 3 months': [moment().subtract(3, 'month'), moment()],
          'Last 6 months': [moment().subtract(6, 'month'), moment()]
        }
      };
    }

The problem is that the template of component 1 has component 2, if both components have a different calendar configuration, component 2 takes the configuration of component 1 and I want the configurations to be different.

This is the templete main1.component.html

<span>Calendar 1</span>
<div *ngFor="let dateInput of dateInputs">
    <div daterangepicker
    [options]="{startDate:dateInput.start, endDate:dateInput.end }"
    (selected)="selectedDate($event, dateInput)">
    <label>Date:</label>
    <div>
      <label>From:</label>
      <input class="form-control" type="text" name="dateStart" value="{{ dateInput.start | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateStart" />
      <label>To:</label>
      <input class="form-control" type="text" name="dateEnd" value="{{ dateInput.end | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateEnd" />
    </div>
</div>
<main2.component></main2.component>

This is the templete main2.component.html

<span>Calendar 2</span>
<div *ngFor="let dateInput of dateInputs">
    <div daterangepicker
    [options]="{startDate:dateInput.start, endDate:dateInput.end }"
    (selected)="selectedDate($event, dateInput)">
    <label>Date:</label>
    <div>
      <label>From:</label>
      <input class="form-control" type="text" name="dateStart" value="{{ dateInput.start | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateStart" />
      <label>To:</label>
      <input class="form-control" type="text" name="dateEnd" value="{{ dateInput.end | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateEnd" />
    </div>
</div>

What could be the problem? Thank you,

Eladerezador
  • 1,277
  • 7
  • 25
  • 48
  • did three components have 3 different templates or HTML? How they are organized in your project? – Prithivi Raj Nov 20 '17 at 10:32
  • are three components diferents with three templates diferents, each ts has its respective html – Eladerezador Nov 20 '17 at 10:35
  • replace your 2nd component options with 1st component options. I guess options are not reflecting in any of the components – Prithivi Raj Nov 20 '17 at 10:42
  • ok, I think it's because I have a parent component with two child components, in the first one a date configuration is loaded and in the second one another configuration, and I think the second one cancels the first one, because in the third component, the configuration applies well. – Eladerezador Nov 20 '17 at 10:52
  • I will probably have to create a new component – Eladerezador Nov 20 '17 at 11:10
  • try to give different names for the options and try again. unless you share data with parent and child component by using Input and output data will not be shared. – Prithivi Raj Nov 20 '17 at 11:16

0 Answers0