antd选择日期自定义组件

最新推荐文章于 2024-04-07 18:12:39 发布
最新推荐文章于 2024-04-07 18:12:39 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Ant Design React相关 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/122378432
版权

在这里插入图片描述

组件

在这里插入图片描述

这里写目录标题

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 } from './DatePageChange';
export { default as DateInfoChange } from './DateInfoChange';
const GRadio = Radio.Group;
const BRadio = Radio.Button;
export default ({ dateType, dateTypeConfig, handleCustomClick = () => {} }) => {
    const onChangeGRadio = value => {
        let date = null;
        switch (value) {
            case dateTypeConfig.DAILY:
                date = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
                break;
            case dateTypeConfig.WEEKLY:
                date = [
                    moment()
                        ?.week(moment()?.week())
                        .startOf('week')
                        .format('YYYY-MM-DD'),
                    moment()
                        ?.week(moment()?.week())
                        .endOf('week')
                        .format('YYYY-MM-DD'),
                ];
                break;
            case dateTypeConfig.MONTHLY:
                date = [
                    moment()
                        ?.month(moment()?.month())
                        .startOf('month')
                        .format('YYYY-MM-DD'),
                    moment()
                        ?.month(moment()?.month())
                        .endOf('month')
                        .format('YYYY-MM-DD'),
                ];
                break;
            case dateTypeConfig.YEARLY:
                date = [`${dayjs().format('YYYY')}-01-01`, `${dayjs().format('YYYY')}-12-31`];
                break;
            case dateTypeConfig.CUSTOM:
                date = [
                    moment().format('YYYY-MM-DD'),
                    moment()
                        ?.endOf('month')
                        ?.format('YYYY-MM-DD'),
                ];
                break;
            default:
                date = [
                    moment().format('YYYY-MM-DD'),
                    moment()
                        ?.endOf('month')
                        ?.format('YYYY-MM-DD'),
                ];
                break;
        }
        handleCustomClick({
            start_date: date && date?.[0] ? date?.[0] : null,
            end_date: date && date?.[1] ? date?.[1] : null,
            dateType: value,
        });
    };
    return (
        <div style={{ display: 'flex' }}>
            <GRadio value={dateType} onChange={e => onChangeGRadio(e?.target?.value)}>
                <BRadio value={dateTypeConfig.DAILY} style={{ width: '60px', textAlign: 'center' }}>
                    日
                </BRadio>
                <BRadio value={dateTypeConfig.WEEKLY} style={{ width: '60px', textAlign: 'center' }}>
                    周
                </BRadio>
                <BRadio value={dateTypeConfig.MONTHLY} style={{ width: '60px', textAlign: 'center' }}>
                    月
                </BRadio>
                <BRadio value={dateTypeConfig.YEARLY} style={{ width: '60px', textAlign: 'center' }}>
                    年
                </BRadio>
                <BRadio value={dateTypeConfig.CUSTOM} style={{ minWidth: '60px', textAlign: 'center' }}>
                    自定义
                </BRadio>
            </GRadio>
        </div>
    );
};

DateInfoChange.jsx

import React, { useState, useEffect, useMemo } from 'react';
import { DatePicker, message } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';

const { RangePicker } = DatePicker;
export default ({
    dateType,
    dateTypeConfig,
    currentDateInfo,
    handleCustomDateClick = () => {},
    customDisabled = 90,
}) => {
    const [time, setTime] = useState(moment());
    const [customTime, setCustomTime] = useState([moment(), moment()?.endOf('month')]);
    useEffect(() => {
        const end_date = currentDateInfo?.end_date ? moment(currentDateInfo?.end_date) : null;
        const start_date = currentDateInfo?.start_date ? moment(currentDateInfo?.start_date) : null;
        const datas = [start_date, end_date];
        const dateValue = currentDateInfo?.start_date ? moment(currentDateInfo?.start_date) : null;

        switch (dateType) {
            case dateTypeConfig.DAILY:
            case dateTypeConfig.WEEKLY:
            case dateTypeConfig.MONTHLY:
            case dateTypeConfig.YEARLY:
                setTime(dateValue);
                break;
            case dateTypeConfig.CUSTOM:
                setCustomTime(datas);
                break;
            default:
                break;
        }
    }, [currentDateInfo, dateType, setTime, dateTypeConfig]);
    const dataPicker = useMemo(() => {
        const onValueChange = value => {
            let params = {};
            switch (dateType) {
                case dateTypeConfig.DAILY:
                    params = {
                        start_date: value ? value.format('YYYY-MM-DD') : null,
                        end_date: value ? value.format('YYYY-MM-DD') : null,
                    };
                    break;
                case dateTypeConfig.WEEKLY:
                    params = {
                        start_date: value
                            ? value
                                  ?.week(value?.week())
                                  .startOf('week')
                                  .format('YYYY-MM-DD')
                            : null,
                        end_date: value
                            ? value
                                  ?.week(value?.week())
                                  .endOf('week')
                                  .format('YYYY-MM-DD')
                            : null,
                    };
                    break;
                case dateTypeConfig.MONTHLY:
                    params = {
                        start_date: value
                            ? value
                                  ?.month(value?.month())
                                  .startOf('month')
                                  .format('YYYY-MM-DD')
                            : null,
                        end_date: value
                            ? value
                                  ?.month(value?.month())
                                  .endOf('month')
                                  .format('YYYY-MM-DD')
                            : null,
                    };
                    break;
                case dateTypeConfig.YEARLY:
                    params = {
                        start_date: value ? moment(`${value}-01-01`)?.format('YYYY-MM-DD') : null,
                        end_date: value
                            ? moment(`${value}-01-01`)
                                  ?.endOf('month')
                                  ?.format('YYYY-MM-DD')
                            : null,
                    };
                    break;
                case dateTypeConfig.CUSTOM:
                    params = {
                        start_date: value && value[0] ? value[0].format('YYYY-MM-DD') : null,
                        end_date: value && value[1] ? value[1].format('YYYY-MM-DD') : null,
                    };
                    break;
                default:
                    break;
            }
            const interval = moment(params.end_date).diff(params.start_date, 'days');
            if (dateType === dateTypeConfig.CUSTOM && interval > customDisabled) {
                message.error(`日期选择最多相差${customDisabled}天`);
                return;
            }
            handleCustomDateClick(params);
        };
        switch (dateType) {
            case dateTypeConfig.DAILY:
                return (
                    <DatePicker
                        allowClear={false}
                        disabledDate={current => {
                            return current && current >= moment();
                        }}
                        locale={locale}
                        style={{ width: '100%' }}
                        onChange={onValueChange}
                        value={time}
                    />
                );
            case dateTypeConfig.WEEKLY:
                return (
                    <DatePicker
                        allowClear={false}
                        disabledDate={current => {
                            return current > moment().endOf('day');
                        }}
                        locale={locale}
                        style={{ width: '100%' }}
                        onChange={onValueChange}
                        picker="week"
                        value={time}
                    />
                );
            case dateTypeConfig.MONTHLY:
                return (
                    <DatePicker
                        allowClear={false}
                        disabledDate={current => {
                            return current > moment().endOf('day');
                        }}
                        locale={locale}
                        style={{ width: '100%' }}
                        onChange={onValueChange}
                        picker="month"
                        value={time}
                    />
                );
            case dateTypeConfig.YEARLY:
                return (
                    <DatePicker
                        allowClear={false}
                        disabledDate={current => {
                            return current > moment().endOf('day');
                        }}
                        locale={locale}
                        style={{ width: '100%' }}
                        onChange={onValueChange}
                        picker="year"
                        value={time}
                    />
                );
            case dateTypeConfig.CUSTOM:
                return (
                    <RangePicker
                        allowClear={false}
                        disabledDate={current => {
                            return current && current.valueOf() > moment().subtract(0, 'days');
                        }}
                        locale={locale}
                        style={{ width: '100%' }}
                        onChange={onValueChange}
                        value={customTime}
                    />
                );
            default:
                break;
        }
    }, [dateType, handleCustomDateClick, dateTypeConfig, time, customTime, customDisabled]);
    return dataPicker;
};

DatePageChange.jsx

import React, { useMemo } from 'react';
import { Button, message } from 'antd';
import moment from 'moment';

export default ({
    dateType,
    dateTypeConfig,
    currentDateInfo = {},
    handleDatePageClick = () => {},
    customDisabled = 90,
}) => {
    const changeDate = useMemo(() => {
        let preName = '';
        let nextName = '';
        switch (dateType) {
            case dateTypeConfig.DAILY:
                preName = '前一天';
                nextName = '后一天';
                break;
            case dateTypeConfig.WEEKLY:
                preName = '上一周';
                nextName = '下一周';
                break;
            case dateTypeConfig.MONTHLY:
                preName = '上一月';
                nextName = '下一月';
                break;
            case dateTypeConfig.YEARLY:
                preName = '上一年';
                nextName = '下一年';
                break;
            case dateTypeConfig.CUSTOM:
                preName = '前一天';
                nextName = '后一天';
                break;
            default:
                break;
        }
        const onChangeDatePage = flag => {
            let start_date = currentDateInfo?.start_date;
            let end_date = currentDateInfo?.end_date;
            switch (dateType) {
                case dateTypeConfig.DAILY:
                    if (flag) {
                        start_date = moment(start_date)
                            .subtract(1, 'days')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .subtract(1, 'days')
                            .format('YYYY-MM-DD');
                    } else {
                        const current = moment(start_date).format('YYYY-MM-DD');
                        const disable_start = moment()
                            .endOf('days')
                            .format('YYYY-MM-DD');
                        if (moment(current).isSameOrAfter(disable_start)) return;
                        start_date = moment(start_date)
                            .add(1, 'days')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .add(1, 'days')
                            .format('YYYY-MM-DD');
                    }

                    break;
                case dateTypeConfig.WEEKLY:
                    if (flag) {
                        start_date = moment(start_date)
                            .subtract(1, 'weeks')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .subtract(1, 'weeks')
                            .format('YYYY-MM-DD');
                    } else {
                        const current = moment(start_date).format('YYYY-MM-DD');
                        const disable_start = moment()
                            .endOf('weeks')
                            .format('YYYY-MM-DD');

                        if (moment(current).isSameOrAfter(disable_start)) return;
                        start_date = moment(start_date)
                            .add(1, 'weeks')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .add(1, 'weeks')
                            .format('YYYY-MM-DD');
                    }
                    break;
                case dateTypeConfig.MONTHLY:
                    if (flag) {
                        start_date = moment(start_date)
                            .subtract(1, 'months')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .subtract(1, 'months')
                            .format('YYYY-MM-DD');
                    } else {
                        const current = moment(start_date).format('YYYY-MM');
                        const disable_start = moment()
                            .endOf('month')
                            .format('YYYY-MM');
                        if (moment(current).isSameOrAfter(disable_start)) return;
                        start_date = moment(start_date)
                            .add(1, 'months')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .add(1, 'months')
                            .format('YYYY-MM-DD');
                    }
                    break;
                case dateTypeConfig.YEARLY:
                    if (flag) {
                        start_date = moment(start_date)
                            .subtract(1, 'years')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .subtract(1, 'years')
                            .format('YYYY-MM-DD');
                    } else {
                        const current = moment(start_date).year();
                        const disable_start = moment()
                            .endOf('year')
                            .format('YYYY');
                        if (current === Number(disable_start)) return;
                        start_date = moment(start_date)
                            .add(1, 'years')
                            .format('YYYY-MM-DD');
                        end_date = moment(end_date)
                            .add(1, 'years')
                            .format('YYYY-MM-DD');
                    }
                    break;
                case dateTypeConfig.CUSTOM:
                    if (flag) {
                        start_date = moment(start_date)
                            .subtract(1, 'days')
                            .format('YYYY-MM-DD');
                    } else {
                        end_date = moment(end_date)
                            .add(1, 'days')
                            .format('YYYY-MM-DD');
                    }
                    break;
                default:
                    break;
            }
            const interval = moment(end_date).diff(start_date, 'days');
            if (dateType === dateTypeConfig.CUSTOM && interval > customDisabled) {
                message.error(`日期选择最多相差${customDisabled}天`);
                return;
            }
            handleDatePageClick(start_date, end_date);
        };

        return (
            <div style={{ display: 'flex' }}>
                <Button onClick={() => onChangeDatePage(true)}>{preName} </Button>
                <Button onClick={() => onChangeDatePage(false)}>{nextName} </Button>
            </div>
        );
    }, [dateType, currentDateInfo, handleDatePageClick, dateTypeConfig, customDisabled]);
    return changeDate;
};

使用组件

import React, { useState, useEffect, useMemo } from 'react';
import '@ant-design/compatible/assets/index.css';
import { Button, Form, Checkbox } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import moment from 'moment';
import { getCombineClassName, getShowCount } from '@/utils/utils';
import ProductNameSelect from '@/components/ProductNameSelect';
import HardwareModelSelect from '@/components/HardwareModelSelect';
import WarehouseNameSelect from '@/components/WarehouseNameSelect';
import CustomDateSelect, { DateInfoChange, DatePageChange } from '@/components/CustomDateSelect';

const FormItem = Form.Item;
const dateTypeConfig = {
    DAILY: 'daily',
    WEEKLY: 'weekly',
    MONTHLY: 'monthly',
    YEARLY: 'yearly',
    CUSTOM: 'custom',
};
const Filter = ({ listParams, dispatch, currentModel, dateType, isExpand, staticFilter }) => {
    const [form] = Form.useForm();
    const { resetFields, setFieldsValue } = form;
    const [clientWidth, setClientWidth] = useState(document.body.clientWidth);
    const datePickerItemParam = () => {
        let lable = '';
        let sourceClassName = 'three-word-padding';
        let itemName = dateTypeConfig.DAILY;
        switch (dateType) {
            case dateTypeConfig.DAILY:
                lable = '选择日';
                itemName = dateTypeConfig.DAILY;
                break;
            case dateTypeConfig.WEEKLY:
                lable = '选择周';
                itemName = dateTypeConfig.WEEKLY;
                break;
            case dateTypeConfig.MONTHLY:
                lable = '选择月';
                itemName = dateTypeConfig.MONTHLY;
                break;
            case dateTypeConfig.YEARLY:
                lable = '选择年';
                itemName = dateTypeConfig.YEARLY;
                break;
            case dateTypeConfig.CUSTOM:
                lable = '';
                sourceClassName = '';
                itemName = dateTypeConfig.CUSTOM;
                break;
            default:
                break;
        }
        return { itemName, lable, sourceClassName };
    };
    useEffect(() => {
        window.addEventListener('resize', () => {
            setClientWidth(document.body.clientWidth);
        });
    }, []);
    useEffect(() => {
        // const end_date = listParams?.end_date ? moment(listParams?.end_date) : null;
        // const start_date = listParams?.end_date ? moment(listParams?.end_date) : null;
        // const datas = [start_date, end_date];
        // const dateValue = listParams?.start_date ? moment(listParams?.start_date) : null;
        // const name = datePickerItemParam().itemName;
        setFieldsValue({
            ...listParams,
            // [dateTypeConfig.CUSTOM]: datas,
            // [name]: dateValue,
        });
    }, [setFieldsValue, listParams, datePickerItemParam]);
    console.log(listParams);
    const handleSearch = () => {
        dispatch({ type: `${currentModel}/getList` });
    };
    const handleFormReset = () => {
        dispatch({ type: `${currentModel}/resetParams` }).then(res => {
            resetFields();
            setFieldsValue({
                dates_daily: moment(),
            });
        });
    };

    const onValuesChange = (changedValues, allValues) => {
        const {
            dates,
            dates_daily,
            start_dt_week,
            end_dt_week,
            start_dt_month,
            end_dt_month,
            start_dt_year,
            change_date,
            ...others
        } = allValues;
        const params = {
            page: 1,
            ...others,
        };

        dispatch({
            type: `${currentModel}/updateStateProps`,
            payload: {
                name: 'listParams',
                value: { ...params },
            },
        });
        if (['name'].includes(Object.keys(changedValues)[0])) {
            //  input输入项通过回车来触发搜索
            return;
        }
        handleSearch();
    };

    const onChangeCheckbox = value => {
        dispatch({
            type: `${currentModel}/overrideStateProps`,
            payload: {
                staticFilter: value,
            },
        });
    };
    const commonCustomDateProps = {
        dateType,
        currentDateInfo: {
            start_date: listParams?.start_date || null,
            end_date: listParams?.end_date || null,
        },
        dateTypeConfig,
        customDisabled: 90,
        handleCustomClick({ start_date, end_date, dateType }) {
            dispatch({
                type: `${currentModel}/updateStateProps`,
                payload: {
                    name: 'listParams',
                    value: {
                        start_date: start_date || null,
                        end_date: end_date || null,
                    },
                },
            });
            dispatch({
                type: `${currentModel}/overrideStateProps`,
                payload: {
                    dateType,
                },
            });
            handleSearch();
        },
        handleDatePageClick(start_date, end_date) {
            dispatch({
                type: `${currentModel}/updateStateProps`,
                payload: {
                    name: 'listParams',
                    value: {
                        start_date: start_date || null,
                        end_date: end_date || null,
                    },
                },
            });

            setFieldsValue({
                dates: [moment(start_date), moment(end_date)],
            });
            handleSearch();
        },
        handleCustomDateClick({ start_date, end_date }) {
            dispatch({
                type: `${currentModel}/updateStateProps`,
                payload: {
                    name: 'listParams',
                    value: {
                        start_date: start_date || null,
                        end_date: end_date || null,
                    },
                },
            });
            handleSearch();
        },
    };

    return (
        <Form
            onFinish={handleSearch}
            className="filterListForm"
            form={form}
            initialValues={{
                name: '', // 客户名称
            }}
            onValuesChange={onValuesChange}
        >
            <FormItem
                style={{ minWidth: 350 }}
                className={getCombineClassName({
                    sourceClassName: '',
                    isExpand,
                    sort: 1,
                    clientWidth,
                })}
            >
                <CustomDateSelect {...commonCustomDateProps} />
            </FormItem>
            <FormItem
                // name="daily"
                // name={datePickerItemParam().itemName}
                label={datePickerItemParam().lable}
                className={getCombineClassName({
                    sourceClassName: datePickerItemParam().sourceClassName,
                    isExpand,
                    sort: 2,
                    clientWidth,
                })}
            >
                <DateInfoChange {...commonCustomDateProps} />
            </FormItem>
            <FormItem
                name="change_date"
                label=""
                className={getCombineClassName({
                    sourceClassName: 'three-word-padding',
                    isExpand,
                    sort: 3,
                    clientWidth,
                })}
            >
                <DatePageChange {...commonCustomDateProps} />
            </FormItem>
            <FormItem
                name="operator_id"
                label="仓库"
                className={getCombineClassName({
                    sourceClassName: 'three-word-padding',
                    isExpand,
                    sort: 4,
                    clientWidth,
                })}
            >
                <WarehouseNameSelect placeholder="请选择仓库" />
            </FormItem>
            <FormItem
                name="product_name"
                label="产品名称"
                className={getCombineClassName({
                    sourceClassName: 'four-word-padding',
                    isExpand,
                    sort: 5,
                    clientWidth,
                })}
            >
                <ProductNameSelect type="product" allowClear={false} hasAll="全部" />
            </FormItem>
            <FormItem
                name="product_id"
                label="硬件型号"
                className={getCombineClassName({
                    sourceClassName: 'four-word-padding',
                    isExpand,
                    sort: 6,
                    clientWidth,
                })}
            >
                <HardwareModelSelect type="product" hasAll />
            </FormItem>
            {/* 年后再处理 分组统计条件 */}
            {false && (
                <FormItem
                    style={{ minWidth: 600 }}
                    className={getCombineClassName({
                        sourceClassName: 'six-word-padding',
                        isExpand,
                        sort: 7,
                        clientWidth,
                    })}
                    label=""
                >
                    <Checkbox.Group style={{ width: '100%' }} onChange={onChangeCheckbox} defaultValue={staticFilter}>
                        <span style={{ marginRight: 10 }}>分组统计条件</span>
                        <Checkbox value="wear_name">仓库名称</Checkbox>
                        <Checkbox value="name">产品名称</Checkbox>
                        <Checkbox value="hardware_model">硬件型号</Checkbox>
                    </Checkbox.Group>
                </FormItem>
            )}

            <FormItem>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
                <Button type="default" style={{ marginLeft: 8 }} onClick={handleFormReset}>
                    重置
                </Button>
                {getShowCount(clientWidth) < 12 ? (
                    <Button
                        type="link"
                        onClick={() => {
                            dispatch({
                                type: `${currentModel}/overrideStateProps`,
                                payload: {
                                    isExpand: !isExpand,
                                },
                            });
                        }}
                        icon={isExpand ? <DownOutlined /> : <UpOutlined />}
                        style={{ marginLeft: 8 }}
                    >
                        {!isExpand ? '折叠' : '展开'}
                    </Button>
                ) : null}
            </FormItem>
        </Form>
    );
};
export default Filter;
waillyer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端---antd中的日期选择组件
sinat_39227164的博客
05-20 1927
前端---使用antd中的DatePicker实现YearPicker需求现有的组件类型手动实现YearPicker 需求 需要设计一个时间选择框，但是之只需要选中某年即可，且拿到选择的这年的值作为url请求参数去请求数据。 当用户需要获取一个日期，可以点击标准输入框，弹出日期面板进行选择。如下图： 现有的组件类型 日期类组件包括以下四种形式。（无YearPicker） DatePicker ...
antd通过 filterDropdown 自定义按某天时间搜索功能
10-16
主要介绍了antd通过 filterDropdown 自定义按某天时间搜索功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue+antd——实现农历日期控件——技能提升
yehaocheng520的博客
03-18 2276
vue+antd——实现农历日期控件——技能提升
antd-vue 日期多选组件
ccccc97的博客
08-18 1841
因项目需求 日期多选 UI组件使用的antd中没有该功能 本菜鸡就自己将日历修改为日期多选 具体思路为在每个日历格中插入复选框 外层使用下拉框来实现选中数据展示 以下为具体代码。
Vue Antdv a-form 表单中使用自定义组件，并支持 v-decorator 效验
最新发布
2401_84098088的博客
04-07 586
自定义一个输入框来举例包装一个 input，让它支持数据双向绑定 v-model，同时也支持 form 表单的效验使用一个输入框home.vue：进行使用form
antd 下拉组件，可以自定义选择日期范围
星期Ⅷ
09-07 1478
antd 下拉组件，可以自定义选择日期范围（Popover + RangePicker） 使用 Antd 现有组件 Popover, DatePicker 接收value（组件值）, onChange（变化传出值）, selList（下拉选项） 变量visible 控制组件是否显示 diyTime 存自定义的日期数据 import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Popover
Ant Design、Element组件：时间日期选择器限制选择范围的几种场景及区别
qq_45796592的博客
12-06 3146
Ant Design、Element组件：时间日期选择器限制选择范围的几种场景及区别
antd 日期组件(DatePicker.RangePicker)使用
echo_Ae的博客
09-28 9683
举例子： 我们在后台发布一个商品 秒杀时间分 开始、结束 需求：开始时间不能选择现在时间的之前精确到分 比如（现在是2019-09-28 16:01:00 2019-09-28 16:00:00之前日期是不能选择的 ） 1.要看(还要安装 yarn add moment)moment.js(http://momentjs.cn/docs/...
antd日期组件时间范围动态跟随
艾米栗的代码天地
02-10 1689
antd 日期组件，时间自动跟随。
antdv + moment DatePicker日期组件默认显示当天、当周、当月
agua001的博客
02-15 5051
一、当天: 两种形式 1、非表单 <a-range-picker :allowClear="false" v-model="timeForm" class="range-item" style="width: 98%" format="YYYY-MM-DD" :ranges="{ 当天: [moment(), moment()], }" :placeholder="['开始时间', '结束时间']" :disabledDate="disabledDate"
antd vue 日期控件的使用（选年份）
qiulei_21的专栏
03-01 1303
Ant Design Vue下DatePhttps://img-blog.csdnimg.cn/direct/f58e12d8218e43f4b4da9b54a8714ab9.pngicker选年控件的使用
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
自定义组件 1、自定义组件被getFieldsValue包裹，会获得以下属性 onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样...
Jeecg自定义下拉式部门选择组件
11-05
Jeecg自定义下拉式部门选择组件
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
01-22
原因： 表单监听了关闭事件，执行了setState，若是给...以上这篇解决antd日期选择组件,添加value就无法点击下一年和下一月问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件
antd日期选择器禁止选择当天之前的时间操作
01-22
使用disabledDate属性（不可选择的日期） 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().subtract(1, days); //当天之前的不可选，不...
antd DatePicker组件a-date-picker、a-week-picker、a-month-picker 限制选未来时间以及周、月转化成日期
热门推荐
agua001的博客
03-03 1万+
1、a-date-picker：默认当天，限制选择未来日期(后台需要日期区间参数) <a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="时间" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" > <a-date-picker style="width: 100%" v-decorator="['timeF
关于Antd中的RangePicker组件使用
ts_shinian_web
07-12 3086
在Web应用程序开发中，日期选择器是一种常见的用户界面组件，用于让用户方便地选择日期。日期选择器的设计需要考虑可用性、易用性和用户体验等因素。在众多的前端框架和库中，提供了一个功能强大、易于使用的日期选择器组件。本文将深入探讨AntD中的日期选择器，包括其定义、作用、使用场景以及如何在实际应用中使用。Ant Design的日期选择器组件提供了一种方便、简洁的方式来让用户选择日期。它支持单选、多选和范围选择等多种模式，并提供了快速导航、自定义日期格式、禁用日期等功能。
react+antd日期选择组件二次封装
廊坊吴彦祖
08-09 1360
react 项目，基于 Ant-Design 的 DatePicker 组件的二次封装，实现以下功能：预设 昨天，今天，上周，本周，上月，本月 时间范围快捷选择，设置只能选择某天数范围之内的日期，默认无限制，设置某天以后的时间不能选择，默认今天 ...
react+antd二次封装日期选择组件
weixin_55799355的博客
12-21 1013
结合react、ant Design DatePicker RangePicker组件二次封装可直接选择“昨天”、“本周”、“上一周”、“本月”、“上个月”时间范围。 可自定义默认选择日期initDate。 返回时间格式isAddTime：yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。默认不添加时分秒，isAddTime默认false。 能否选择当天（今天）canSelectToday。 可自定义日期选择框样式style（此处采用内敛样式），参看ant Design 日期选择组件样式设
antd dateCellRender如何自定义渲染日期单元格背景色
06-06
`dateCellRender` 属性可以接受一个函数作为参数，该函数返回一个自定义的 React 组件，用于渲染日期单元格。 下面是一个示例代码，可以自定义渲染日期单元格背景色： ```jsx import { DatePicker } from 'antd';...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值