[inline] Selection isn't highlighted

[Joelius300]

Versions

Angular CLI: 9.1.9
Node: 12.14.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.9
@angular-devkit/core         9.1.9
@angular-devkit/schematics   9.1.9
@schematics/angular          9.1.9
@schematics/update           0.901.9
rxjs                         6.5.4

"ngx-daterangepicker-material": "^3.0.1"

Describe the bug When adding a simple in-line daterangepicker to a project which already has material installed and setup, the selection isn't highlighted. Also the style is off but that seems to be a side-effect of that (maybe #282 is related?).

I'm new to angular and I don't know what I'm missing here. Is there a step that's not documented in the readme (like adding moment.js) or is this a bug?

To Reproduce Basically follow the readme:

• ng new repro-project --skipGit=true --interactive=false
• cd repro-project
• ng add @angular/material
  • Choose Ping/Blue Grey (two down + Enter)
  • Enter (no typography styles)
  • Enter (yes browser animations)
• npm i -D ngx-daterangepicker-material
• npm i moment (not in readme?)
• Import in app.module.ts

  import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
  NgxDaterangepickerMd.forRoot()

• ng generate @angular/material:navigation nav
• ng g component picker

• Copy basic in-line example from demo picker.component.html

  <ngx-daterangepicker-material
    [locale]="{ applyLabel: 'Done', firstDay: 1 }"
    name="inline-daterangepicker"
    (chosenDate)="chosenDate($event)"
  >
  </ngx-daterangepicker-material>
  <div>Chosen date: {{ inlineDate | json }}</div>

  picker.component.ts

  import { Component } from '@angular/core';
  import * as moment from 'moment';
  
  @Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
  })
  export class PickerComponent {
  inlineDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment };
  
  selected = {
      startDate: moment('2015-11-18T00:00Z'),
      endDate: moment('2015-11-26T00:00Z'),
  };
  
  chosenDate(chosenDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment }): void {
      console.log(chosenDate);
      this.inlineDate = chosenDate;
  }
  }

• Replace contents of app.component.html with <app-nav></app-nav>
• Replace <!-- Add Content Here --> in nav.component.html with <app-picker></app-picker>
• ng serve
• Select two dates and press done.

Expected behavior The date is selected and displayed in the div below the picker.
The selection is highlighted like in the basic in-line demo.

Actual behavior The date is selected and displayed in the div below the picker but nothing is highlighted.

Screenshots Expected (taken from demo):

Actual (10. - 12. June should be highlighted but it's not):

Stackblitz link I tried to create a stackblitz with the same steps but there are errors I don't know how to fix :/
https://stackblitz.com/edit/angular-ivy-z1rwff

Additional context Here's a full project which was created by following the repro steps that shows the issue: repro-project.zip

Things I tried:

• Adding @import '../node_modules/ngx-daterangepicker-material/daterangepicker-theme.scss'; to the top of styles.css but doesn't make a difference.
• Removing the built-in theme from the styles array in angular.json and instead importing it in styles.css with @import '../node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css';. No difference either.
• I checked the versions. I'm using angular >=9.0.0 with @angular/material so the version ^3.0.1 (which npm added automatically) should be fine.
• Checked the console (both browser and angular dev server) for errors but none appeared.
• A bit absurd but I also tried fixing the moment version to 2.24.0 which of course did nothing.

[th3b3s1]

I have the same issue

[nimasrn]

I have the same issue too. any solution yet?

[kirega]

Hey @Joelius300 , I guess you can force the calendar to update the selection by, getting the instance of the datePicker with @ViewChild and updating your chosenDate function as follows

  @ViewChild(DaterangepickerComponent, { static: false }) datePicker: DaterangepickerComponent;

  chosenDate(chosenDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment }): void {
      console.log(chosenDate);
      this.inlineDate = chosenDate;
       /*add this*/
       this.datePicker.updateView()
  }

[th3b3s1]

Thanks for the anwswer, but i've chenged to this module ng-bootstrap and is working perfectly.

[Joelius300]

@kirega Thank you for the suggestion but unfortunately that doesn't solve the issue. It doesn't show the selection even when calling updateView. It's also suboptimal conceptually because the selection should be highlighted and updated before I submit.

Is there any workaround for this or a foreseeable fix? It seems like I'm not the only one having this issue.

[akrolasik]

I have the same issue

[masteruser20]

same here

[djoyrocks]

I am facing the same issue. Any Update ?

[masteruser20]

I've fixed(workaround) by adding simple mixin to my app styles. https://github.com/fetrarij/ngx-daterangepicker-material/issues/266

[djoyrocks]

I've fixed(workaround) by adding simple mixin to my app styles. #266

Thanks, It's Working Fine

[Joelius300]

Seems to work, thank you. It still seems to have an issue because the start-date's corners aren't rounded (with pink-bluegray) but for now that's good enough :)

[fetrarij]

@Joelius300 I'm sorry this is not a bug, with inline picker we dont use ngModel, just use startDate and endDate

[startDate]="selected?.startDate"
 [endDate]="selected?.endDate"

take a look at Basic In-line Timepicker Example in https://fetrarij.github.io/ngx-daterangepicker-material/simple @djoyrocks @akrolasik @nimax1998 @kirega @1h3b3s1 you should do the same

[nboukeffa]

Hi @fetrarij,

Except if I'm wrong the props that you're mentioning are not present in the inline picker example, this is confusing and probably why the issue has be opened. Updating the example will help.

Thanks :)

[fetrarij]

@nboukeffa check the link I provided, it's there

[Joelius300]

@fetrarij Are you sure? The issue also reproduces without using ngModel like so:
(also why did you even think I used ngModel? I didn't use it in my repro)

picker.component.html

<ngx-daterangepicker-material (chosenDate)="chosenDate($event)"></ngx-daterangepicker-material>
<div>Chosen date: {{ inlineDate | json }}</div>

picker.component.ts

import { Component, ViewChild } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
})
export class PickerComponent {
  inlineDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment };

  chosenDate(chosenDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment }): void {
      this.inlineDate = chosenDate;
  }
}

Also it's not related to inline at all. You can also reproduce it like this:

<mat-form-field>
  <input
      type="text" <-- this line isn't documented but without it it doesn't work correctly (no styling and date isn't displayed)
      matInput
      ngxDaterangepickerMd
      showCancel="true"
      placeholder="Choose date"
      [(ngModel)]="selected"
      [showDropdowns]="true"
      [lockStartDate]="false"
      [customRangeDirection]="false"
      (ngModelChange)="ngModelChange($event)"
      (change)="change($event)"
  />
</mat-form-field>

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
})
export class PickerComponent {
  selected = {
    startDate: moment('2015-11-18T00:00Z'),
    endDate: moment('2015-11-26T00:00Z'),
  };

  ngModelChange(e): void {
    console.log(e);
  }

  change(e): void {
      console.log(e);
  }
}

The code is taken from the link you posted (your demo page).

I'm almost certain this has to be a styling bug in regard to the pre-built styles because the here mentioned workaround fixes the issue. However, it's not documented anywhere and I believe a lot of people (especially beginners who have trouble helping themselfs with angular) use angular material with pre-built themes.

Could you please investigate this again?

Ps. Cannot reopen because I didn't close it myself.

[fetrarij]

v3.0.2 is up. From there, if you install the plugin with ng add ngx-daterangepicker-material you will be prompted with a theme selector, then the theme you selected will be added in angular.json (styles). If you added the plugin manually just includes your preferred theme in node_modules/ngx-daterangepicker-material/prebuilt-themes/

[Joelius300]

Just a note because someone else might trip on this: You need both styles in the styles array, otherwise it's completely messed up.

When installing I got

"styles": [
    "./node_modules/ngx-daterangepicker-material/prebuilt-themes/pink-bluegrey.css",
    "src/styles.scss"
],

but you need

"styles": [
    "./node_modules/ngx-daterangepicker-material/prebuilt-themes/pink-bluegrey.css",
    "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
    "src/styles.scss"
],