Vben admin time selector related configuration and setting of unselectable time

One 、 Introduce configuration ;
component Value ：

• DatePicker： Date selection
  

• RangePicker： Date range selection
  

• format: Format of form display ,‘YYYY-MM-DD HH:mm:ss’, / ‘YYYY-MM-DD’,

• valueFormat： Get worthy format （ The data format transmitted to the background ）
  Timestamp ’X’, Capitalization X yes 10 position , A lowercase letter x yes 13 position
  ‘YYYY-MM-DD HH:mm:ss’, / ‘YYYY-MM-DD’,

• showTime： Display the configuration of hours, minutes and seconds , Don't write, don't display, select specific hours, minutes and seconds
  showTime: {
  defaultValue: [moment(‘00:00:00’, ‘HH:mm:ss’), moment(‘23:59:59’, ‘HH:mm:ss’)],
  },

• disabledDate Setting is not optional

1. Do not choose the future time

{
    
    label: ' Solution time ',
    field: 'processTime',
    component: 'DatePicker',
    required: true,
    componentProps: {
    
      //  The time format passed to the backend -- 
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      //  Time format displayed 
      showTime: {
    
        format: 'YYYY-MM-DD HH:mm:ss',
      },
      //  Setting is not optional 
      disabledDate: (current) => {
    
        //  Do not choose the future time 
        return current && current > Date.now();
      },
      style: {
    
        width: '100%',
      },
    },
  },

design sketch ：

2. You cannot choose the past time
   moment If there is no plug-in project, you need to download it yourself Then introduce the

 import moment from 'moment';
{
    
    label: ' Solution time ',
    field: 'processTime',
    component: 'DatePicker',
    required: true,
    componentProps: {
    
      //  The time format passed to the backend --  Timestamp 'X', Capitalization X yes 10 Bit lowercase x yes 13 position 
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      //  Time format displayed 
      showTime: {
    
        format: 'YYYY-MM-DD HH:mm:ss',
      },
      //  Setting is not optional 
      disabledDate: (current) => {
    
        //  You cannot choose the past time 
        return current < moment().add(-1, 'd');
      },
      style: {
    
        width: '100%',
      },
    },
  },

design sketch