当前位置:网站首页>配置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
边栏推荐
- [God level operation] analyze the Ninja code with the traditional Chinese thoughts of Confucius and Laozi!
- Abbyy finereader 15 adds editing page layout function
- 40 tips for life that may be useful
- Easyexcel exports according to the filter column (not empty in the middle, the order can be adjusted)
- GPS对时系统(网络对时仪器)应用电子政务系统
- Learning notes of millet mall, day 5: ES full text search
- 手势切换背景,让直播带货更加身临其境
- Custom indoor map online tool
- Explain git in detail
- 双十一大秒杀,云服务器低至 0.7 折
猜你喜欢

JT-day10

云数据库的本质是什么?探究华为云数据库的核心价值

A great guide to curl

How the API gateway carries the API economic ecological chain

详解Git

第三阶段 Day20 购物车模块实现 添加拦截器 添加用户权限校检 实现订单模块

How to implement a simple student management system with C + +

Almost finished all the list titles, I found these things...

【涂鸦物联网足迹】涂鸦云平台接口说明

Easyexcel exports according to the filter column (not empty in the middle, the order can be adjusted)
随机推荐
How to choose the development of Biao fan interactive interpretation program?
配置ng-zerro的nz-date-picker时间选择组件
[invite you to vote] who is the key driver behind these big open source events in 2020?
都要2021年了,现代C++有什么值得我们学习的?
【神级操作】 以中国传统的孔子和老子的思想,来分析忍者代码!
说说 C# 9 新特性的实际运用
Mac无法连接到App Store并提示需要连接网络怎么办?
谷粒商城学习笔记,第五天:ES全文检索
[最佳实践]了解 Eolinker 如何助力远程办公
Almost finished all the list titles, I found these things...
Using powerful powerbi Sangji diagram to express complex operation business flow
双十一大秒杀,云服务器低至 0.7 折
day83:luffy:添加购物车&导航栏购物车数字显示&购物车页面展示
openocd+jlink_picture
单链表反转
What is the essence of cloud database? Explore the core value of Huawei cloud database
Git + -- Code hosting in the history of version management
EasyExcel根据筛选列导出(中间不空列,顺序可调整)
Solve the problem that the page does not refresh after the wechat applet uses switchtab to jump
CentOS查看CPU核心数及cpuinfo解析