angular 使用mob-date-selector教程

1. 安装

npm i mob-date-selector --save-dev

2. 引入css

angular.json

"styles": ["node_modules/ng-zorro-antd/src/ng-zorro-antd.css","node_modules/mob-date-selector/index.css","src/styles.scss"
],

3. html

test.component.html

<form nz-form [formGroup]="timeForm" nzLayout="horizontal"><nz-form-item><nz-form-control><input id="stime-picker" nz-input placeholder="开始时间" formControlName="stime" /></nz-form-control></nz-form-item><nz-form-item><nz-form-control><input id="etime-picker" nz-input placeholder="结束时间" formControlName="etime" /></nz-form-control></nz-form-item>
</form>
<!-- 多个input需要对应多个Container -->
<div id="sdate-picker"></div>
<div id="edate-picker"></div>

4. ts

test.component.ts

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import DateSelector from 'mob-date-selector';
import * as dateFns from 'date-fns';
@Component({selector: 'app-test',templateUrl: './test.component.html',styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, AfterViewInit {timeForm: FormGroup; // 定义表单ngOnInit() {// 定义formControl/*使用插件时，input绑定了touchstart事件，然而点击时有可能会使input聚焦，因此禁用input*/this.timeForm = this.fb.group({stime: [{ value: '', disabled: true }],etime: [{ value: '', disabled: true }]});}ngAfterViewInit() {this.createPicker();}createPicker() {const stimePicker = new DateSelector({input: 'stime-picker',container: 'sdate-picker',type: 1,param: [1, 1, 1, 1, 1],beginTime: [],endTime: [],recentTime: [],success: (arr1) => {const res = this.getTimeString(arr1);this.timeForm.get('stime').setValue(res);}});const etimePicker = new DateSelector({input: 'etime-picker',container: 'edate-picker',type: 1,param: [1, 1, 1, 1, 1],beginTime: [],endTime: [],recentTime: [],success: (arr1) => {const res = this.getTimeString(arr1);this.timeForm.get('etime').setValue(res);}});}getTimeString(arr): string {const timeString = dateFns.format(new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4]),'YYYY-MM-DD HH:mm:ss');return timeString;}
}

基本完成

颜色不太好看？改一下咯

而且input设置了disabled后样式与正常的不一样，会让人感觉点不了的，改回来

5. css(scss)

// 使用 ::ng-deep 即可选中组件内元素
::ng-deep .ant-input-disabled { // ng-zorro ui框架自带的样式，改一下background-color: #fff;color:rgba(0, 0, 0, 0.65);cursor: pointer;
}::ng-deep .date-selector-btn-box {.date-selector-tab {color: #1890ff;}.date-selector-tab-active {background-color: #4FC3F7;color: #fff;}background-color: #1890ff;
}

demo

https://github.com/ZhongMingK...