当前位置:网站首页>配置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
边栏推荐
- What if the Mac can't connect to the app store and prompts you to connect to the network?
- Configure static IP address in ubuntu18.04 NAT mode -2020.11.09
- Revealing the logic of moving path selection in Summoner Canyon?
- What is the Ethernet module? What are the functions and characteristics of the Ethernet module
- GPS timing system (network timing instrument) application of e-government system
- 【STM32H7】第6章 ThreadX GUIX上手之STM32H7 DMA2D加速
- 零基础小白python入门——深入Python中的文件操作
- 详解Git
- CentOS查看CPU核心数及cpuinfo解析
- [invite you to vote] who is the key driver behind these big open source events in 2020?
猜你喜欢
随机推荐
Easyexcel exports according to the filter column (not empty in the middle, the order can be adjusted)
Android instance - simple login layout
Container technology (3) mirror summary [16]
Building Hadoop environment based on pseudo distributed under centos7
超简单集成华为系统完整性检测,搞定设备安全防护
Gesture switch background, let live with goods more immersive
Which industries are suitable for enterprises to develop wechat applet?
Custom indoor map online tool
Ubuntu18.04 NAT模式下配置静态IP地址 -2020.11.09
容器技术(三)搭建本地 Registry【15】
Flink的安装部署
From next year, about 30% of the web pages will be inaccessible to older Android devices
容器技术(三)镜像小结【16】
几乎刷完了力扣所有的链表题,我发现了这些东西。。。
Abbyy finereader 15 adds editing page layout function
揭秘在召唤师峡谷中移动路径选择逻辑?
dat.GUI Creating visualization tools (1)
分享用MathType编辑字母与数学公式的技巧
DCL单例模式中的缺陷及单例模式的其他实现
(3)ASP.NET Core3.1 Ocelot认证








