在微信小程序中 用ant design mini 框架中date-picker 半年度格式化显示的代码实现
时间: 2024-03-09 14:49:44 浏览: 253
可以使用 Ant Design Mini 中的 DatePicker 组件来实现半年度日期的选择,并且可以使用 `moment.js` 库来对日期进行格式化显示。具体代码如下所示:
```javascript
import { DatePicker } from 'antd-mobile';
import React, { useState } from 'react';
import moment from 'moment';
const HalfYearDatePicker = () => {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const handleDateChange = (dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};
const handleHalfYearClick = (half) => {
const now = new Date();
const year = now.getFullYear();
const startMonth = half === 'first' ? 0 : 6;
const endMonth = half === 'first' ? 5 : 11;
const startDate = new Date(year, startMonth, 1);
const endDate = new Date(year, endMonth, 31);
setStartDate(startDate);
setEndDate(endDate);
};
const formatDate = (date) => {
return moment(date).format('YYYY-MM-DD');
};
return (
<>
<div>
<span onClick={() => handleHalfYearClick('first')}>上半年</span>
<span onClick={() => handleHalfYearClick('second')}>下半年</span>
</div>
<DatePicker
mode="range"
value={[startDate, endDate]}
onChange={handleDateChange}
format={formatDate}
/>
</>
);
};
export default HalfYearDatePicker;
```
在上面的代码中,我们添加了一个 `formatDate` 函数来将日期格式化为 `YYYY-MM-DD` 的格式。然后在 `DatePicker` 组件中使用 `format` 属性来指定日期格式化函数。这样就可以在选择日期时,以指定的格式将日期显示出来。
阅读全文