DatePicker – NG-ZORRO – Angular 17 – SCSS – Issues

  Kiến thức lập trình

I am trying to implement ng zorro date picker in angular 17 where we are using scss files for styling. The Ui and the functionality seem to be fully broken while doing their stackblitz example in the above case

<nz-space>
  <nz-select *nzSpaceItem [(ngModel)]="mode">
    <nz-option nzValue="date" nzLabel="Date"></nz-option>
    <nz-option nzValue="week" nzLabel="Week"></nz-option>
    <nz-option nzValue="month" nzLabel="Month"></nz-option>
    <nz-option nzValue="year" nzLabel="Year"></nz-option>
  </nz-select>
  <nz-date-picker *nzSpaceItem [nzMode]="mode"></nz-date-picker>
</nz-space>

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NzSpaceModule } from 'ng-zorro-antd/space';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { FormsModule } from '@angular/forms';
import { NzI18nService, en_US } from 'ng-zorro-antd/i18n';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    FormsModule,
    NzSpaceModule,
    NzSelectModule,
    NzDatePickerModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'project_1';
  mode = 'date';

  constructor(private i18n: NzI18nService) {
    this.i18n.setLocale(en_US);
  }
}

This is the code I am trying to work on.

New contributor

Srj is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT