Description of usage of date selection box mixed time selector in ant design vue

First of all, the moment method is used to format time, and the moment component needs to be introduced into the page

import moment from 'moment'

Structure code:

&lt;a-date-picker
   style="width:100%"
   :getCalendarContainer="(triggerNode) =&gt; "
   format="YYYY-MM-DD HH:mm:ss"
   v-decorator="[
   'pushtime',
   {
   rules: [{ required: true, message: 'Please enter the release time!' }]
   }
   ]"
   :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
   :disabledDate="disabledDate"
   :disabledDateTime="disabledDateTime"
   placeholder="Please select time"
   @change="onChange"
   @ok="onOk" /&gt;

Among them, the default display time is set, disabledDate is the disabled date, disabledDataTime is the disabled time, and detailed attribute descriptions can be found in the official document.

Here is the method code:

methods: {
 moment,
 onChange (value, dateString) {
 ('Selected Time: ', value)
 ('Formatted Selected Time: ', dateString)
 },
 onOk (value) {
 ('onOk: ', value)
 },
 range (start, end) {
 const result = []
 for (let i = start; i < end; i++) {
 (i)
 }
 return result
 },
 disabledDate (current) {
 // Can not select days before today and today
 return current && current < moment().endOf('day')
 },
 
 disabledDateTime () {
 return {
 disabledHours: () => (0, 24).splice(4, 20),
 disabledMinutes: () => (30, 60),
 disabledSeconds: () => [55, 56]
 }
 }
}

Supplementary knowledge:Initialize antDesign RangePicker default selection date and restrict date optional range

Two main settings are made:

1. Initialize the default selection date;

2. Limit the optional range of dates (limit the maximum optional range is the last 6 months)

The specific implementation code is shown below:

import React, { PureComponent } from 'react';
import moment from 'moment';
import { 
 Form, 
 Modal,
 DatePicker,
} from 'antd';
 
const FormItem = ;
const { RangePicker } = DatePicker;
 
@()
class ExportModal extends PureComponent {
 
 // Form Submission okHandle = () =&gt; {
 const { handleExportByTime, form } = ;
 ((err, fieldsValue) =&gt; {
 const rangeValue = fieldsValue['range-picker'];
 if (err) return;
 const values ={
 ...fieldsValue,
 'date': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
 }
 // Reset the form ();
 handleExportByTime(values);
 });
 };
 
 // Unselectable time period disabledDate = current =&gt; current &amp;&amp; current &gt; moment().endOf('day') || current &lt; moment().subtract(6, 'months');
 
 render() {
 const {
 form: { getFieldDecorator },
 handleModalVisible,
 submitting,
 modalVisible,
 } = ;
 
 const formItemLayout = {
 labelCol: { span: 4 },
 wrapperCol: { span: 14 }
 };
 
 // Initialization date display const defaultSelectDate = {
 startDate: moment().subtract(1, 'weeks'),
 endDate: moment().endOf('day')
 }
 
 return (
 &lt;Modal
 destroyOnClose
 title='Export by time period'
 centered
 keyboard={false}
 maskClosable={false}
 visible={modalVisible}
 confirmLoading={submitting}
 onOk={}
 onCancel={() =&gt; handleModalVisible()}
 &gt;
 &lt;FormItem {...formItemLayout} label='Time period' extra='The data can be exported up to 6 months'&gt;
  {getFieldDecorator('range-picker',{
  initialValue: [, ]
  })(
  &lt;RangePicker disabledDate={} /&gt;
  )}
 &lt;/FormItem&gt;
 &lt;/Modal&gt;
 );
 }
}
export default ExportModal;

The above description of the usage of the date selection box mixed time selector in ant design vue is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.