有关antd的datePicker组件自定义可选时间范围

最新推荐文章于 2024-06-30 16:58:05 发布
最新推荐文章于 2024-06-30 16:58:05 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： 工作笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TiAmo_Lyj/article/details/106077447
版权
本文总结了在Vue项目中使用Ant Design的DatePicker组件实现自定义时间范围选择的经验。通过disabledDate API遇到的问题及解决方案，包括时间格式转换、时间戳比较和设置禁选日期的方法。同时，推荐了一篇相关的简书文章作为参考。
摘要由CSDN通过智能技术生成

在工作中遇到一个这样的需求，要求自定义可选择的时间范围，通过使用antd官方文档中的实例并不能完全满足需求。在运用到disabledDate这个api的时候有很多困惑，通过网上一些经验简单对这个api的使用做一些总结：
我们以打开开始时间弹框为例

    disabledStartDate(startValue) {
   
      //startValue参数会打印出多个，为打开当前时间选择面板下所有的时间。这个参数是一个moment类型的时间
      if (!startValue || !endValue) {
   
      //这里的意思是还没有选择开始时间和结束时间的时候返回false,也就是当前面板的每个时间都可以选择
        return f
最低0.47元/天 解锁文章
0xchance
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
weixin_39550940的博客
12-21 6077
现在项目上有个需求，在时间选择上需要精确到分钟，且分钟只能是0分钟或者是30分钟。其中组件有个minuteStep参数，将其设置成30，即可只显示0分钟或者30分钟了。但是在选择的时候发现了问题，点击时间控件，弹出时间选择的界面，如果不去选择0分钟或者30分钟，直接点击确认，控件会选择到当前时间的分钟数，这是不合理的，解决方法：参考了https://www.zhihu.com/question/5...
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是今天之前【包含今天】 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { console.log(current) return current > moment().startOf('day');
antd选择日期自定义组件
waillyer的博客
01-08 1176
组件 这里写目录标题组件index.jsDateInfoChange.jsxDatePageChange.jsx使用组件 index.js import React from 'react'; import { Radio } from 'antd'; import 'moment/locale/zh-cn'; import moment from 'moment'; import dayjs from 'dayjs'; export { default as DatePageChange } fro.
antd DatePicker日期选择框限制最多选择一年
最新发布
m0_63788547的博客
06-30 404
antd DatePicker日期选择框限制最多选择一年
Antd---日期选择框DatePicker
dengchai8691的博客
01-26 1614
获取DatePicker值的方法 方法一： 以前一直用的是下面这个方法，半路前端加前端新人，方法可能有点不优雅。 监听datePicker的onChange事件 触发onChange时，即改变state。当点击提交按钮时，再获取this.state.foundingtime的值。 方法二： 　　由于客户需求变更，需要对这部分代码进行修改，再次看到这段代码，老感觉...
Antd 时间预设范围
TigerJ8_1026的博客
01-05 342
<RangePicker ranges={{ '今日': [moment(), moment()], 昨天: [moment().startOf('day').subtract(1,'days'), moment().endOf('day').subtract(1, 'days')], '最近7天': [moment().startOf('day').subtract(6, 'days'), moment().endOf('day')], '最...
antd组件限定时间选择器日期范围
热门推荐
qq_38519358的博客
08-15 1万+
react的antd组件时间选择器限定日期范围为指定范围 react项目中碰到一个需求，要求antd的日期选择器组件可选择范围为：只能选择开始时间的后60天 即开始时间在结束日期前60天，结束日期在开始日期后60天，以下是截图和核心代码：主要利用日期组件的disabledDate属性 开始日期相同逻辑：不能早于结束日期前60天，不能晚于结束日期；不再截图 下面是react代码...
自己封装antd风格的YearRangePicker，并设置不可选范围，年份选择以及月份选择组件
冷故事的博客
11-24 1969
由于antd的yearPicker并没有封装完全，或者说根本没有这个插件，但是目前，我们公司碰到了一个要求在十年内的日期选择，所以没法使用antd自带的yearPicker了只能自己手动封装，内容如下 具体代码，参见我的码云：https://gitee.com/lenggushi/YearPicker.git ...
react-rdatepicker基于react的日历选择组件支持单选多选
08-15
除了上述特性，`react-rdatepicker`还有更多功能，比如时间选择、禁用日期、自定义格式化等。你可以通过查看其官方文档或源码（如压缩包中的`r-date-picker-master`目录）来获取更详细的使用指南。 总结，`react-...
antdv a-datepicker 日期组件设置禁用时间区间， 区间外等总结
子非渔
10-20 5723
日期组件 经常会出现要求某段时间内不可选， 或者某个时间节点前、后不可选。每次都写很麻烦。于是就总结了一下可能出现的情况。 首先 vue部分 <a-date-picker :key="key" v-model="dateValue" :value="moment(dateValue, attrBute.format)" @change="onChange" @openChange="openChange" :format=
react-reactdatepicker一个简单和可重用的日期选择器React组件
08-15
react-datepicker - 一个简单和可重用的日期选择器React组件
antd datepicker固定日期，时间在可选范围内可用（数组push，但不能获取）
qq_41820599的博客
12-18 1204
Little Tip 遇到的小问题 在componentDidMount的周期函数钟，初始化函数时，数组push进去了，但是不能获取 出现这种情况，悬停后面的小i提示This value was evaluated upon first expanding. It may have changed since then.。百度之后显示数组在console之后还进行了更改，所以不能获取到数组。 原因 如图所示，先输出了88行信息，其次输出70行信息，最后输出84行信息。所以在88行运行的情况下，数组还未
Antd组件的使用 --- DatePicker（设置默认值）
wu_2004的博客
05-18 3785
它接收的是一个dayjs类型的值，所以我们需要借助一个库。将日期进行转化为dayjs格式。
DatePicker 多时间粒度选择器组件
caoyuna1998的博客
09-17 36
使用方法： 　在.vue文件引入 import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'; export default { components: {ruiDatePicker} }在template中使用组件 <ruiDatePicker fields=...
antd的DatePicker日期选择框实现日期的回显与改变
qq_52845451的博客
02-15 5222
antd的DatePicker日期选择框实现日期的回显与改变
Ant Design学习——DatePicker
qq_26057771的博客
12-26 4551
2021SC@SDUSC 日期选择框DatePicker 用法： 一个输入或选择日期的控件。 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。 API 日期类组件包括以下五种形式。 DatePicker DatePicker[picker=“month”] DatePicker[picker=“week”] DatePicker[picker=“year”] DatePicker[picker=“quarter”] (4.1.0 新增) RangePicker 国际化配置 import
关于AntDesignVue的DatePicker日期选择框组件开始、结束时间日期限制的方法
码农舟舟的博客
08-22 1975
关于AntDesignVue的DatePicker日期选择框组件开始、结束时间做日期选择限制，
Antd DatePicker 限制日期
知之为知之，不知为不知
06-15 2423
<DatePicker allowClear showTime format="YYYY-MM-DD HH:mm" placeholder="请选择时间" disabledDate={ (current) => { // 限制最大日期为明天 return current && ...
antd-datepicker组件获取时间值,及相关设置方式
09-05
antd-datepicker是Ant Design中提供的日期选择器组件，可用于选择日期和时间值。获取时间值的方式有以下几种： 1. 使用onChange事件：在DatePicker组件上绑定onChange事件，当用户选择了日期或时间时，会触发该事件并将选择的时间值作为参数传递给回调函数。可以通过e.target.value来获取选择的时间值。 ```jsx <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { console.log(value); // 可以对选择的时间值进行相关处理 } ``` 2. 使用moment.js库：Ant Design的DatePicker组件默认返回的是Moment.js对象，可以使用该库提供的方法来获取和处理时间值。 ```jsx import moment from 'moment'; <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { const selectedValue = moment(value).format('YYYY-MM-DD'); console.log(selectedValue); // 可以对选择的时间值进行相关处理 } ``` 相关设置方式包括： 1. 默认时间值：可以通过设置defaultValue属性来指定DatePicker组件的默认时间值。 ```jsx <DatePicker defaultValue={moment('2022-01-01', 'YYYY-MM-DD')} /> ``` 2. 可选时间范围：可以通过设置disabledDate属性来限制可选的时间范围。该属性接收一个函数，根据函数的返回值来控制禁用的日期。 ```jsx <DatePicker disabledDate={disabledDate} /> ``` ```jsx const disabledDate = (current) => { // 返回true表示禁用该日期 return current && current < moment().endOf('day'); } ``` 3. 时间格式：可以通过设置format属性来指定DatePicker组件的时间格式。 ```jsx <DatePicker format="YYYY-MM-DD HH:mm:ss" /> ``` 以上就是antd-datepicker组件获取时间值及相关设置方式的介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值