nz-date-picker组件时间范围限制

组件：

<nz-date-picker [nzFormat]="'yyyy-MM-dd'"[nzDisabledDate]="disabledDate" style="width: 100%"name="startDate" [(ngModel)]="formInfo.startDate"nzPlaceHolder="请选择开始日期"></nz-date-picker>

js：
方案1（只能与固定的日期比较）

disabledDate(time) {return time.getTime() < Date.now();  //只能选择今天过后的日期// 一天是24*60*60*1000 = 86400000 = 8.64e7return time.getTime() < Date.now() - 8.64e7; //只能选择今天以及今天过后的日期   return time.getTime() > Date.now(); //只能选择今天以及今天以前的日期return time.getTime() >  Date.now()-8.64e7; //只能选择今天之前的日期let curDate = (new Date()).getTime();let three = 90 * 24 * 3600 * 1000;let threeMonths = curDate - three;return time.getTime() > Date.now() || time.getTime() < threeMonths; //只能选择选择三个月之前到今天的日期}

方案2（可以和变量比较）

import {differenceInCalendarDays} from 'date-fns';disabledDate = (current: Date): boolean => {//只能选择开始日期（disableStartDate）到今天（包括今天）之间的日期return differenceInCalendarDays(current, new Date()) > 0 || differenceInCalendarDays(current, this.disableStartDate) <0;};

nz-date-picker组件时间范围限制相关推荐

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
小程序——picker组件
转载:https://www.cnblogs.com/bgwhite/p/9335648.html 小程序自带的picker组件,picker一共分为三类普通选择器:mode = selector ...
IOS学习六:Date Picker， Picker View选取器控件初步
Date Picker控件和Picker View控件其实也是算比较常用到视图. 以下根据红柚子上得几个例子: 分别从(日期选取器)Date Picker -->单部件选取器-->多部 ...
Iphone开发（七）date picker 和 picker view，较复杂的控件
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
转载：WeUI Picker组件--源码分析
原文链接:WeUI Picker组件源代码分析 https://www.cnblogs.com/haha1212/p/8393243.html 前言:由于最近做的一个移动端项目需要用到类似WeUI ...
微信小程序自定义组件之Picker组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 需求: 通过JS条件判断,满足条件就弹出Picker给用户选择一个数组里面的数据. 有些朋友可能会有疑问: 1 ...
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件有默认宽高,不用设置数据源和代理如何 ...
vue html5 picker,基于vue的picker组件
概述基于vue.js选择器组新直能分支调二浏页器朋代说件 DEMO 安装 npm install vue-3d-picker --save import picker from 'vue-3d-pi ...
Date Picker控件：
Date Picker控件: 中文:日期/时间选取器UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期.UIDatePicker有四种模式(model):Ti ...
强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示本地下载今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...

nz-date-picker组件时间范围限制

nz-date-picker组件时间范围限制相关推荐

最新文章

热门文章