React Ant Design 通过 DatePicker获取一周的起止时间

本文介绍了如何在项目中结合AntDesign组件和moment.js库来获取当前选中周的周一和周日日期。通过设置onChange事件处理函数,利用moment的day()方法确定周的开始和结束日期,并进行格式化。代码示例清晰展示了实现过程,适用于前端开发中处理日期的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目中遇到了选择周获取当前周的周一和周日的日期

直接看用的组件Ant Design

这是写的代码

<Space direction="vertical">
    <DatePicker onChange={onChange} picker="week" />
</Space>

需要用到moment,

1.安装moment

npm install moment --save

2.页面引入moment

import moment from 'moment'

写入事件

//周日期选择
  const onChanges = (date, dateString) => {
    console.log(date, dateString);
    const startDate = moment(date).day(1).format('YYYY-MM-DD '); // 周一日期
    const endDate = moment(date).day(7).format('YYYY-MM-DD'); // 周日日期
    console.log(startDate, endDate);
  }

看看控制台输出的结果

 可以看到,已经正确获取到了当前日期所在周的起止日期了。

这里的日期解析主要用到了 moment.js 提供的两个方法,

moment(date).day(1) 代表指定日期所在周的星期一的日期,

moment(date).day(7) 代表指定日期所在周的星期日的日期,

并且通过 format 方法格式化成指定的格式。

文章仅限参考 如有错误请及时指出或补充

### 如何为日期时间组件设置默认值 为了实现日期选择器的默认值设定以及动态范围限制,在 ReactAnt Design 中可以通过 `moment` 或者 `dayjs` 来处理日期对象,并利用受控组件的方式管理状态。下面是一个具体的例子来展示如何配置月份的选择逻辑并自动调整日期选择器的初始值。 #### 使用 Moment.js 的示例代码 ```javascript import React, { useState } from 'react'; import { DatePicker, Radio } from 'antd'; import moment from 'moment'; const App = () => { const [dateRange, setDateRange] = useState(['start', 'end']); function onChange(value) { let startDate; let endDate; switch (value) { case "thisMonth": startDate = moment().startOf('month'); endDate = moment(); break; default: startDate = null; endDate = null; } setDateRange([startDate, endDate]); } return ( <> <Radio.Group defaultValue="custom" onChange={(e) => onChange(e.target.value)}> <Radio.Button value="custom">自定义</Radio.Button> <Radio.Button value="thisMonth">本月</Radio.Button> </Radio.Group> <DatePicker.RangePicker showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" placeholder={['开始时间', '结束时间']} disabledDate={disabledDate} value={[...dateRange]} onChange={(dates) => setDateRange(dates)} /> </> ); function disabledDate(current) { if (!current) return false; // 只能选当前月内的日期 return current && (current < moment().startOf('month') || current > moment()); } }; ``` 此段代码展示了当用户选择了不同的时间段选项时,如何更新日期选择器的状态以反映新的起始和终止日期[^1]。此外,还实现了对可选日期范围的有效控制,确保所选日期不会超出选定的时间区间之外。 对于 Spring Boot 后端服务而言,如果涉及到前后端交互中的默认属性设置,则可以考虑使用 `SpringApplication.setDefaultProperties()` 方法来自定义应用程序启动时的一些全局参数[^2];不过这与前端框架无关,主要用于服务器端环境变量或配置文件加载前的应用程序初始化阶段。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值