Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Carbon DatePicker not opening Calendar on clicking the calendar icon

See original GitHub issue

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>


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 ={ 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

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

Additional information

  • Screenshots or code
  • Notes

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

sinceresivacommented, May 14, 2020

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

ERROR TypeError: is not a function

sinceresivacommented, May 25, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React DatePicker how to open datepicker on click of icon
Just wrap DatePicker with label. All click inside label call focus on input, that open calendar. <label> <DatePicker/> </label>.
Read more >
Date picker – Carbon Design System
Opening the calendar​​ The calendar can be opened in two ways: Clicking the calendar icon on the far right of the field opens...
Read more >
Datepicker - Angular Material
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made...
Read more >
Date picker - Carbon Design System
The single date picker is a text input with a calendar instance attached to it. It also ships with a calendar icon inside...
Read more >
DatePicker - Carbon Components Svelte
By default, the flatpickr option static is set to true so that the calendar is positioned inside the wrapper and next to the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found