let disabledDate = (current:any) => {
return current && current < moment().subtract(1, 'days').endOf('day');
let range = (start:any, end:any) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
return result;
let disabledDateTime = (current:any)=>{
if(current){
let today = moment().date();
if(today == current.date()){
let minute = Number(moment().minutes())
let hour = Number(moment().hour());
let finalHour:number,finalMinute:number;
if(current.hour() > hour ){
finalMinute = 0
}else{
if(current.minute() >= 58){
finalHour = hour + 1;
finalMinute = 0;
}else{
finalHour = hour;
finalMinute = minute + 5;
return {
disabledHours: () => range(0, finalHour),
disabledMinutes: () => range(0, finalMinute)
}else if(moment()>current){
return {
disabledHours: () => range(0, 24),
disabledMinutes: () => range(0, 60),
disabledSeconds: () => range(0, 60)
}else{
return {
disabledHours: () => range(0, 24),
disabledMinutes: () => range(0, 60),
disabledSeconds: () => range(0, 60),
let taskPlanDate = {
label:"扫描时间",
name:"taskPlanDate",
rules:[{ required: true, message: '扫描目标不能为空!' }]
{ defaultValue: moment('YYYY/MM/DD HH:mm:ss') }}
showNow={false}
onOk={(e: any) => {
console.log(e)
</FormItem>
import React from 'react';
import moment from 'moment';
class DateDemo extends React.Component{
disabledDate = (current) => {
return current < moment> moment().add(6, 'day') ;
datePicker
Change = (date) => {
console.log(date,'date即为
DatePicker
选中的
时间
');
在vue3+
antd
项目中我们需要对
日期
数据进行格式化,通常大家会想到moment,但是在
antd
的v3版本中自带dayjs,强大的Day.js也拥有非常强大的
日期
数据格式处理的api,本文就来讲解如何在项目中进行使用
如图,虽然11号不能
选择
,但是点击事件
选择
框,则可以
选择
一整天的
时间
。
显然,这样用户体验十分不好,最理想的应该是用户可以
选择
11号,点开
时间
选择
框`
只能
选择
当前
之后
的
时分秒
`。
在网上找了很多方案,发现全是旧版elementUI的,好像elementPLUS把selectableRange已经去掉了,而文档中也没有明确指出限制
时分秒
的属性,
import dayjs from 'dayjs';//必须引入
<a-date-picker v-model:value="formData.start" format="YYYY-MM-DD" :disabled-date="disabledDate"/>
(1)当天之前的不可选(
包括
当天),如下图所示:
const disabledDate = current => {
return current&
antd
datepicker
禁止选中
时间
范围今天为
时间
点,但范围禁止选中区间范围可选,前后
时间
禁止选中
今天为
时间
点,但范围禁止选中
handleDate= current => {
if (!current) {
return false
} else {
return current > moment()//今天以后可选
return current< moment()/...
<el-form-item label="VPN到期
时间
" :label-width="formLabelWidth" prop="endTime" >
<el-date-picker
v-model="vpn.endTime"
type="datetime"
value-format
react的
antd
组件
时间
选择器
限定
日期
范围为指定范围
react项目中碰到一个需求,要求
antd
的
日期
选择器
组件可
选择
范围为:
只能
选择
开始
时间
的后60天
即开始
时间
在结束
日期
前60天,结束
日期
在开始
日期
后60天,以下是截图和核心代码:主要利用
日期
组件的disabledDate属性
table添加滚动条以后表格对不齐
官方文档给出的解释:
若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。
注意:v4 版本固定列通过 sticky 实现,IE 11 会降级成横向滚动。
添加的类名,为了和其他表格作区分。在你想重置的时候调用该方法即可。我的应用场景是点击查询的时候,要复位T.T。
下拉框Se
今天使用
antd
的DatePiacker发现问题如下:
发现onChange函数中的value是moment格式的,如果直接传的话会是XXXTXXXZ这种格式,不过后面发现有一个dateString参数是YYYYMMDD hh:mm:ss格式的;
但是在onOk中其参数貌似只有一个value,而且也是moment格式的,这里需要对其进行转化为想要的YYYYMMDD hh:mm:ss格式,