当前位置:网站首页>配置ng
配置ng
2020-11-09 19:13:00 【程序猿欧文】
1、官方示例nz-date-picker
官方示例中做到的效果无法满足业务查询的务求,比如:我需要先选中开始时间,然后再选择结束时间时无法选中相同日期的数据,并且即使选择“此刻”时,对应的时间也没有进行禁用
说明:ng-zerro是有对应的实现的,但是在示例中相对简单,无法达到效果,本文仅仅做了自己的实现记录
2、如何实现可以选择相同的时间,并且禁用不在选中时间范围内的时间
如:开始时间2020-11-09 12:12:12,结束时间需要选中2020-11-09 12:12:12,并且小于2020-11-09 12:12:12的时间需要禁用
html实现:
<nz-date-picker [nzDisabledTime]="disabledStartTime" [nzDisabledDate]="disabledStartDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="startValue" nzPlaceHolder="开始时间" (ngModelChange)="onStartChange($event)" > </nz-date-picker> <nz-date-picker [nzDisabledTime]="disabledEndTime" [nzDisabledDate]="disabledEndDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="endValue" nzPlaceHolder="结束时间" (ngModelChange)="onEndChange($event)" > </nz-date-picker>
ts实现:
// 对日期进行配置disabledStartDate = (startValue: Date): boolean => { if (!startValue || !this.endValue) { return false; } // 相同时间可以选择 if (startValue.getTime() === this.endValue.getTime()){ return false; } return startValue.getTime() >= this.endValue.getTime();}disabledEndDate = (endValue: Date): boolean => { if (!endValue || !this.startValue) { return false; } if (endValue.getDate() === this.startValue.getDate()) { // 相同日期不禁用 return false; }else{ // 相同时间可以选择 return endValue.getTime() <= this.startValue.getTime(); }}// 对时间进行禁用disabledStartTime: DisabledTimeFn = (_value: Date, type?: DisabledTimePartial) => { // 对开始时间进行设置 if (!this.endValue){ return null; } if (!_value){ _value = this.endValue; } let disableMinutes = []; let disableS.........
版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4710283
边栏推荐
- Visualization construction of CIM platform
- Abbyy finereader 15 adds editing page layout function
- 菜鸟福音,28本书籍循序渐进让你成为大牛!(附学习大纲一份)
- js对象数组去重
- CentOS查看CPU核心数及cpuinfo解析
- Almost finished all the list titles, I found these things...
- RBAC of kubernetes authority management (1)
- 配置ng-zerro的nz-date-picker时间选择组件
- Day83: Luffy: add shopping cart & navigation bar shopping cart digital display & shopping cart page display
- 【STM32H7】第6章 ThreadX GUIX上手之STM32H7 DMA2D加速
猜你喜欢
随机推荐
How to use RTSP streaming component easypusher to push MP4 files to easydarwin open source platform?
Learning notes of millet mall, day 5: ES full text search
Visualization construction of CIM platform
js对象数组去重
小程序调用原生onShareAppMessage分享,imageUrl参数是mp4格式怎么办
手势切换背景,让直播带货更加身临其境
【邀你投票】谁是2020年这些开源大事件背后的关键推动者?
Configure static IP address in ubuntu18.04 NAT mode -2020.11.09
dat.GUI 打造可视化工具(一)
[invite you to vote] who is the key driver behind these big open source events in 2020?
Activity工作流交互demo简单实现
上云嘉年华,超低价云服务器来袭
数据库执行truncate table CM_CHECK_ITEM_HIS怎么恢复
Ultra simple integration of Huawei system integrity testing, complete equipment security protection
Flink的安装部署
Gesture switch background, let live with goods more immersive
Ubuntu18.04 NAT模式下配置静态IP地址 -2020.11.09
[interview experience] bat programmers interviewed 200 people and analyzed the most frequently asked interview questions
Gesture switch background, let live with goods more immersive
非常值得一看的 Curl 用法指南