@geom_team/ngx-date-picker

NgxDatePicker

This library was generated with Angular CLI version 11.2.14.

基于ng-zorro-antd date-picker 组件实现，添加季度选择功能

installation

#use npm
npm install @geom_team/ngx-date-picker

#use yarn
yarn add @geom_team/ngx-date-picker

usage example

appModule

import { NgxDatePickerModule } from '@geom_team/ngx-date-picker'

@NgModule({
  declarations: [
  // ...
  ],
  imports: [
    NgxDatePickerModule
  ],
  providers: [],
  bootstrap: [
    // ...
  ]
})
export class AppModule { }

component

import { Component } from '@angular/core';

@Component({
  selector: 'date-picker-demo',
  templateUrl: './date-picker.component.html',
  styleUrls:['./date-picker.component.less'],
})
export class DatePickerDemoComponent {
 
  formatMap: Record<string, string> = {
    date: 'yyyy-MM-dd',
    time: 'HH:mm:ss',
    week: 'yyyy-ww',
    quarter: 'yyyy-[Q]Q',
    month: 'yyyy/MM',
    year: 'yyyy',
    dateTime: 'yyyy-MM-dd HH:mm:ss',
    
  }
  language = 'zh_CN';
  datePickerConfig =  {
    isInline:false,
    mode: 'date',
    showTime: true,
    isRange: false,
    format: this.formatMap['date'],
    size: 'default',
    disabled: false,
  }
  formattedDate:string = '';
  
  inputValue = new Date();
 
  onDateChange(date: any) {
    console.log("date: ", date)
  }
  
  changeLanguage() {
    if (this.language === 'zh_CN') {
      this.language = 'en_US';
    } else {
      this.language = 'zh_CN';
    }
  }
  
}

<h2>日期季度选择器组件</h2>

<button nz-button nzType="primary" (click)="changeLanguage()">切换语言</button>
<br/>
<ngx-date-picker
  [nzBorderless]="false"
  [nzStatus]="'error'"
  [nzMode]="datePickerConfig.mode"
  [isRange]="datePickerConfig.isRange"
  [nzInline]="datePickerConfig.isInline"
  [nzShowTime]="datePickerConfig.showTime"
  [nzFormat]="datePickerConfig.format"
  [nzSize]="datePickerConfig.size"
  [nzDisabled]="datePickerConfig.disabled"
  [language]="language"
  [(ngModel)]="inputValue"
  (ngModelChange)="onDateChange($event)"
  (nzOnOk)="onDateChange($event)"
  >
</ngx-date-picker>
<p>{{inputValue}}</p>

API及事件方法与nz-date-picker组件一致