I recently encountered a requirement to set the default start time and end time in the ProTable search box’s time period and call the interface to return the data display.

Implementation idea:

  1. Create formRef to set the default value of the ProTable search;
  2. Get the first and last days of the month by moment;
  3. throughformRef.current? .setFieldsValueAssigned tocreated_at;
  4. throughformRef.current.submit()Call the interface, render the page;

The necessary code to implement this requirement:

import React, { useState, useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import moment from 'moment';
const columns = [
    {
        title: 'Time period'.dataIndex: 'created_at'.valueType: 'dateTimeRange'.hideInTable: true.search: {
            transform: (value) = > {
                return {
                    start_time: value[0].end_time: value[1]}; }},},]const formRef = useRef();
const curMonth = [
    moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')]; useEffect(() = >{ formRef.current? .setFieldsValue({created_at: curMonth, }); formRef.current? .submit(); });return (
    <>
        <ProTable
            columns={columns}
            request={getList}
            rowKey="id"
            formRef={formRef}
        />
    </>
)
Copy the code

Please leave me a message if you have any problems