当前位置:网站首页>配置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
边栏推荐
- [stm32h7] Chapter 6: stm32h7 dma2d acceleration of ThreadX guix
- Git老鸟查询手册
- Using powerful powerbi Sangji diagram to express complex operation business flow
- 详解Git
- Abbyy finereader 15 added edit table cell function
- 云数据库的本质是什么?探究华为云数据库的核心价值
- Mac无法连接到App Store并提示需要连接网络怎么办?
- Super low price cloud server is coming
- 磁阻式随机存储器MRAM基本原理
- 说说 C# 9 新特性的实际运用
猜你喜欢
Kubernetes权限管理之RBAC (一)
andorid实例-简单登录布局
关于生活,可能有用的40条建议
MathType中如何编辑求和公式
How the API gateway carries the API economic ecological chain
Introduction to zero base little white Python
Gesture switch background, let live with goods more immersive
How to page query after the 10 billion level data sub table?
Nine kinds of distributed primary key ID generation schemes of sub database and sub table are quite comprehensive
(3) ASP.NET Core3.1 Ocelot certification
随机推荐
(3)ASP.NET Core3.1 Ocelot认证
零基础小白python入门——深入Python中的文件操作
Git + -- Code hosting in the history of version management
[graffiti Internet of things footprint] graffiti cloud platform interface description
JS object array de duplication
Activity工作流交互demo简单实现
Revealing the logic of moving path selection in Summoner Canyon?
How to edit summation formula in MathType
RBAC of kubernetes authority management (1)
[stm32h7] Chapter 6: stm32h7 dma2d acceleration of ThreadX guix
R8 compiler: tailoring kotlin libraries and Applications
RabbitMQ安装
Knowledge mapping 1.1 -- starting from NER
The applet calls the native onshareappmessage to share. What if the imageurl parameter is in MP4 format
Kubernetes权限管理之RBAC (一)
第三阶段 Day19 用户回显 封装Cookie 商品远程调用 购物车模块 CRUD操作
上云嘉年华,超低价云服务器来袭
OpenOCD-JTAG调试
Visualization construction of CIM platform
百亿级数据分表后怎么分页查询?