当前位置:网站首页>配置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
边栏推荐
- Defects in singleton mode of DCL and other implementations of singleton
- OpenOCD-JTAG调试
- 分享用MathType编辑字母与数学公式的技巧
- day83:luffy:添加购物车&导航栏购物车数字显示&购物车页面展示
- 磁阻式随机存储器MRAM基本原理
- 老旧系统重构技巧,轻松搞定遗留代码
- CIM平台可视化建设
- 40 tips for life that may be useful
- How to realize the authority route and authority menu of background management system
- 校准服务的六个轴心
猜你喜欢

Ubuntu18.04 NAT模式下配置静态IP地址 -2020.11.09

手势切换背景,让直播带货更加身临其境

深入分析商淘多用户商城系统如何从搜索着手打造盈利点

Solve the problem that the page does not refresh after the wechat applet uses switchtab to jump

Function calculation advanced IP query tool development

How to use RTSP streaming component easypusher to push MP4 files to easydarwin open source platform?

How to design and implement storage QoS?

配置ng-zerro的nz-date-picker时间选择组件

几乎刷完了力扣所有的链表题,我发现了这些东西。。。

A great guide to curl
随机推荐
Ubuntu18.04 NAT模式下配置静态IP地址 -2020.11.09
2020中国电信终端技术与标准论坛上专家解读四大热门产业
PHP - cURL复制粘贴性接入短信验证码示例
CentOS view the number of CPU cores and cpuinfo analysis
Container technology (3) mirror summary [16]
谷粒商城学习笔记,第五天:ES全文检索
Revealing the logic of moving path selection in Summoner Canyon?
Numeric keyboard with decimal point in IOS
VsCode之Markdown插件
从硅谷到小米,崔宝秋的25年开源人生
Using powerful powerbi Sangji diagram to express complex operation business flow
RBAC of kubernetes authority management (1)
What is the essence of cloud database? Explore the core value of Huawei cloud database
[invite you to vote] who is the key driver behind these big open source events in 2020?
EasyExcel根据筛选列导出(中间不空列,顺序可调整)
如何实现后台管理系统的权限路由和权限菜单
LeetCode 48 旋转图像
Single linked list inversion
Mit6.824 distributed system course translation & learning notes (3) GFS
高性能库DPDK精简理解