Menu
I am facing an issue with datepicker I am using for angular2. I tried the code from https://material.angular.io/components/datepicker/examples. The output shown in this site is what I need, but instead I am getting the calendar shown at the bottom of the page after footer. There are no CSS changes given in the example.
I am using the following code.
HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
TS:
import {Component} from '@angular/core';
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html',
styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}
Screenshots : Output I need (from example)
Output I am getting
993
It looks like you're missing the theming for your app. There should also be a warning in the console that no default theme was found.
Add the following line to your global stylesheet file (most likely styles.css):
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
Alternatively:
<head>
<!-- Content goes here -->
<link rel="stylesheet" href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css">
<!-- More content goes here -->
</head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
