antd中日期选择框ranges属性一些常用的自定义时间选择范围

ranges={{
  今日: [moment(), moment()],
  前三天: [moment().subtract(3, 'day'), moment()],
  后三天: [moment(), moment().add(3, 'day')],

  本周前: [moment().startOf('week'), moment()],
  本周后: [moment(), moment().endOf('week')],
  本周内: [moment().startOf('week'), moment().endOf('week')],
  近一周: [moment().subtract(1, 'week'), moment()],
  后一周: [moment(), moment().add(1, 'week')],

  本月前: [moment().startOf('month'), moment()],
  本月后: [moment(), moment().endOf('month')],
  本月内: [moment().startOf('month'), moment().endOf('month')],
  近一月: [moment().subtract(1, 'month'), moment()],
  后一月: [moment(), moment().endOf('month')],

  本年前: [moment().startOf('year'), moment()],
  本年后: [moment(), moment().endOf('year')],
  今年内: [moment().startOf('year'), moment().endOf('year')],
  近一年: [moment().subtract(1, 'year'), moment()],
  后一年: [moment(), moment().endOf('year')],

  过去年内: [moment().subtract(6, 'month'), moment()],
  未来年内: [moment(), moment().endOf('year')],
}}
Ant Design的日期选择组件DatePicker支持在选择日期弹窗左侧加上预设的日期选项,可以通过设置showTime属性来实现。具体步骤如下: 1. 在引入DatePicker组件的文件,导入moment.js和antd的DatePicker组件。 ``` import moment from 'moment'; import { DatePicker } from 'antd'; ``` 2. 在DatePicker组件设置showTime属性为一个对象,对象的属性包括: - defaultValue:默认选日期,可以使用moment()方法获取当前日期。 - format:日期格式化字符串,例如'YYYY-MM-DD'。 - showToday:是否显示“今天”选项,设置为true即可显示。 - showYesterday:是否显示“昨天”选项,需要在日期选择弹窗左侧添加一个点击事件,点击后修改日期选择的值为昨天的日期。 - showThisMonth:是否显示“本月”选项,需要在日期选择弹窗左侧添加一个点击事件,点击后修改日期选择的值为本月的第一天和最后一天。 - showLast7Days:是否显示“7日”选项,需要在日期选择弹窗左侧添加一个点击事件,点击后修改日期选择的值为7天前的日期和今天的日期。 - showLast30Days:是否显示“近30天”选项,需要在日期选择弹窗左侧添加一个点击事件,点击后修改日期选择的值为30天前的日期和今天的日期。 下面是一个示例代码: ``` import React, { useState } from 'react'; import moment from 'moment'; import { DatePicker } from 'antd'; const { RangePicker } = DatePicker; const DatePickerWithPresetOptions = () => { const [dateRange, setDateRange] = useState([]); const handleYesterdayClick = () => { const yesterday = moment().subtract(1, 'days'); setDateRange([yesterday, yesterday]); }; const handleThisMonthClick = () => { const firstDayOfMonth = moment().startOf('month'); const lastDayOfMonth = moment().endOf('month'); setDateRange([firstDayOfMonth, lastDayOfMonth]); }; const handleLast7DaysClick = () => { const last7Days = moment().subtract(7, 'days'); setDateRange([last7Days, moment()]); }; const handleLast30DaysClick = () => { const last30Days = moment().subtract(30, 'days'); setDateRange([last30Days, moment()]); }; return ( <RangePicker showTime={{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], }} format="YYYY-MM-DD HH:mm:ss" value={dateRange} onChange={(dates) => setDateRange(dates)} ranges={{ 今天: [moment().startOf('day'), moment().endOf('day')], 昨天: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')], '7日': [moment().subtract(7, 'days').startOf('day'), moment().endOf('day')], 本月: [moment().startOf('month'), moment().endOf('month')], '近30天': [moment().subtract(30, 'days').startOf('day'), moment().endOf('day')], }} renderExtraFooter={() => ( <div> <a onClick={handleYesterdayClick}>昨天</a> <a onClick={handleThisMonthClick}>本月</a> <a onClick={handleLast7DaysClick}>7日</a> <a onClick={handleLast30DaysClick}>近30天</a> </div> )} /> ); }; export default DatePickerWithPresetOptions; ``` 在这个示例,我们创建了一个带有预设日期选项的DatePicker组件。通过设置showTime属性,我们可以让日期选择显示时间选项。同时,我们设置了format属性来指定日期格式化字符串。在ranges属性,我们定义了预设日期选项的名称和日期范围。在renderExtraFooter方法,我们为每一个预设日期选项添加了一个点击事件。 希望这个示例能够帮助你在Ant Design的DatePicker组件实现预设日期选项的功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值