NgxDatePickerMobile

季度选择器组件

installation

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

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

usage example

appModule

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

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

component

@Component({
  selector: 'app-date-picker-mobile-demo',
  templateUrl: './date-picker-mobile.component.html',
  styleUrls: ['./date-picker-mobile.component.less']
})
export class DatePickerMobileDemoComponent implements OnInit {
  
  dateConfig = {
    value: [new Date('2024-07-01 00:00:00'), new Date('2024-07-16 00:00:00')],
    // value: new Date('2024-07-01 00:00:00'),
    // startValue: new Date('2024-07-01 00:00:00'),
    // endValue: new Date('2024-07-16 00:00:00'),
    customSeriesColor: '#4980FF',
    isInline: false,
    isRange: true,
    showTime: false,
    disabledDate: (date: Date) => date > new Date()
  
  }
  nzOpen: boolean = false;
  mode: DateMode = 'quarter';
  parentContainer: HTMLElement | undefined | null = document.querySelector('body') as HTMLElement;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
  }
  ngAfterViewInit(): void {
    this.parentContainer =  document.querySelector('body') as HTMLElement;
    this.cdr.detectChanges();
  }
  handleClick($event: MouseEvent) {
    this.nzOpen = !this.nzOpen
  }

  onConfirm($event: any) {
    console.log('confirm: ', $event)

  }

  onChange($event: any) {
    console.log('onChange: ', $event)
  }
  onClean() {
    console.log("clean: ")
  }

}

<h3>指令方式</h3>
<div class="box">
  <div appDatePicker class="extra-box" [parentContainer]="parentContainer" [mode]="mode" [isRange]="dateConfig.isRange"
    [(value)]="dateConfig.value"  (valueChange)="onChange($event)" 
    (onConfirm)="onConfirm($event)" (onClear)="onClean()">
    <ng-container *ngIf="!dateConfig.isRange">
      <div class="search-item-box" [class.checked]="dateConfig.value"
        [style]="dateConfig.value ? {borderColor: dateConfig.customSeriesColor, color: dateConfig.customSeriesColor} : ''">
        <span *ngIf="!dateConfig.value">{{''}}</span>
        <span *ngIf="dateConfig.value">{{ $any(dateConfig.value) | date:'yyyy-MM-dd HH:mm:ss'}}</span>
        <span nz-icon nzType="caret-down" nzTheme="outline"></span>
      </div>
    </ng-container>
    <ng-container *ngIf="dateConfig.isRange">
      <div class="search-item-box" [class.checked]="dateConfig.value"
        [style]="dateConfig.value ? {borderColor: dateConfig.customSeriesColor, color: dateConfig.customSeriesColor} : ''">
        <span *ngIf="!dateConfig.value">{{''}}</span>
        <span *ngIf="dateConfig.value">
          {{$any(dateConfig.value)[0] | date:'yyyy-MM-dd HH:mm:ss' : '开始时间'}}-{{ $any(dateConfig.value)[1] ?
          ($any(dateConfig.value)[1] | date:'yyyy-MM-dd HH:mm:ss') : '结束时间'}}
        </span>
        <span nz-icon nzType="caret-down" nzTheme="outline"></span>
      </div>
    </ng-container>
  </div>
</div>

<hr>

<h3>模版方式</h3>
<ngx-date-picker-mobile [flipFlopClass]="'flip-flop'" [mode]="mode" [isRange]="dateConfig.isRange"
  [(value)]="dateConfig.value" (valueChange)="onChange($event)"
  (onConfirm)="onConfirm($event)" (onClear)="onClean()">
</ngx-date-picker-mobile>