@geom_team/ngx-date-picker
v0.0.10
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
Downloads
4
Readme
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组件一致