Carbon DatePicker not opening Calendar on clicking the calendar icon

Title line template: [Title]: Brief description

Carbon DatePicker not opening the Calendar on clicking the calendar icon

Detailed description

I am trying to use the Carbon DatePicker component from carbon-components-angular package. On clicking the Calendar Icon I am expecting the Calendar to open so that I can select a date. But the Calendar does not open.

Here is my Angular Template: `<form [formGroup]=“dateTimeformGroup”> <ibm-date-picker id=“dpicker” formControlName=“singleDate” invalidText=“Invalid date format” (valueChange)=“valueChange.emit($event)”> </ibm-date-picker> <div>{{dateTimeformGroup.controls[“singleDate”].value | json}}</div>

</form>`

Here is my Angular Component code

`import { Component, OnInit } from ‘@angular/core’; import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

@Component({ selector: ‘app-date-time-controls’, templateUrl: ‘./date-time-controls.component.html’, styleUrls: [‘./date-time-controls.component.scss’] }) export class DateTimeControlsComponent {

dateTimeformGroup: FormGroup; constructor(protected formBuilder: FormBuilder) { this.dateTimeformGroup = this.formBuilder.group({ singleDate: [ [new Date()], Validators.required ] } ); } }`

Is this a feature request (new component, new icon), a bug, or a general issue? This looks like a bug

Is this issue related to a specific component? This issue is related to the Carbon DatePicker component. What did you expect to happen? What happened instead? What would you like to see changed? Once I click the Calendar icon, I am expecting that the Calendar will open so that I can select a date. But instead the Calendar does not open

What browser are you working in? Google Chrome Version 81.0.4044.138 (Official Build) (64-bit)

What version of the Carbon Design System are you using? “carbon-components”: “^10.9.0”, “carbon-components-angular”: “^3.31.1”, “@angular/core”: “8.2.14”, “@carbon/icons-angular”: “^10.7.0”,

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM specific product

Steps to reproduce the issue

https://codesandbox.io/s/carbon-components-angular-zm1qk?file=/package.json

1. Launch the angular application
2. Click the Calendar Icon on the DatePicker

Additional information

• Screenshots or code
• Notes

[sinceresiva]

Additionally on debugging the code inside the DatePicker I could see the below error:

ERROR TypeError: this.flatpickrInstance.open is not a function

[sinceresiva]

This issue is resolved. The Calendar did not open due to a style conflict with an existing style. Closing the issue.