Instructions for use of date selection box mixed time selector in ant design vue
- 2021-09-04 23:34:53
- OfStack
First, the moment method is used for time formatting, and moment component needs to be introduced into the page
import moment from 'moment'
Structure code:
<a-date-picker
style="width:100%"
:getCalendarContainer="(triggerNode) => triggerNode.parentNode"
format="YYYY-MM-DD HH:mm:ss"
v-decorator="[
'pushtime',
{
rules: [{ required: true, message: ' Please enter the publishing time !' }]
}
]"
:showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
:disabledDate="disabledDate"
:disabledDateTime="disabledDateTime"
placeholder=" Please select a time "
@change="onChange"
@ok="onOk" />
Among them, showTime. defaultValue is the set default display time, disabledDate is the disabled date, and disabledDataTime is the disabled time. Please refer to the official document for detailed attribute description
Here's the method code:
methods: {
moment,
onChange (value, dateString) {
console.log('Selected Time: ', value)
console.log('Formatted Selected Time: ', dateString)
},
onOk (value) {
console.log('onOk: ', value)
},
range (start, end) {
const result = []
for (let i = start; i < end; i++) {
result.push(i)
}
return result
},
disabledDate (current) {
// Can not select days before today and today
return current && current < moment().endOf('day')
},
disabledDateTime () {
return {
disabledHours: () => this.range(0, 24).splice(4, 20),
disabledMinutes: () => this.range(30, 60),
disabledSeconds: () => [55, 56]
}
}
}
Additional knowledge: Initialize antDesign RangePicker default selection date and limit date optional range
There are two main settings:
1. Initialize the default selection date;
2. Limit the date optional range (the maximum limit optional range is the last 6 months)
The specific implementation code is as follows:
import React, { PureComponent } from 'react';
import moment from 'moment';
import {
Form,
Modal,
DatePicker,
} from 'antd';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
@Form.create()
class ExportModal extends PureComponent {
// Form submission
okHandle = () => {
const { handleExportByTime, form } = this.props;
form.validateFields((err, fieldsValue) => {
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 form
form.resetFields();
handleExportByTime(values);
});
};
// Non-selectable time period
disabledDate = current => current && current > moment().endOf('day') || current < moment().subtract(6, 'months');
render() {
const {
form: { getFieldDecorator },
handleModalVisible,
submitting,
modalVisible,
} = this.props;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
};
// Initialization date display
const defaultSelectDate = {
startDate: moment().subtract(1, 'weeks'),
endDate: moment().endOf('day')
}
return (
<Modal
destroyOnClose
title=' Export by time period '
centered
keyboard={false}
maskClosable={false}
visible={modalVisible}
confirmLoading={submitting}
onOk={this.okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem {...formItemLayout} label=' Time period ' extra=' The longest can be exported to the nearest 6 Monthly data '>
{getFieldDecorator('range-picker',{
initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate]
})(
<RangePicker disabledDate={this.disabledDate} />
)}
</FormItem>
</Modal>
);
}
}
export default ExportModal;