首先時間格式化用到moment方法，需要在頁面中引入moment組件

import moment from ’moment’

結(jié)構(gòu)代碼：

<a-date-picker :getCalendarContainer='(triggerNode) => triggerNode.parentNode' format='YYYY-MM-DD HH:mm:ss' v-decorator='[ ’pushtime’, { rules: [{ required: true, message: ’請輸入發(fā)布時間!’ }] } ]' :showTime='{ defaultValue: moment(’00:00:00’, ’HH:mm:ss’) }' :disabledDate='disabledDate' :disabledDateTime='disabledDateTime' placeholder='請選擇時間' @change='onChange' @ok='onOk' />

其中，showTime.defaultValue是設(shè)置的默認(rèn)展示時間，disabledDate為禁用日期，disabledDataTime為禁用時間，詳細(xì)屬性說明可查閱官方文檔

下面是方法代碼：

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] } }}

補充知識：初始化antDesign RangePicker默認(rèn)選擇日期及限制日期可選范圍

主要做了兩個設(shè)置：

1、初始化默認(rèn)選擇日期；

2、限制日期可選范圍（限制最大可選范圍是最近6個月）

具體實現(xiàn)代碼出下：

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 { // 表單提交 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’)], } // 重置表單 form.resetFields(); handleExportByTime(values); }); }; // 不可選擇的時間段 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 } }; // 初始化日期顯示 const defaultSelectDate = { startDate: moment().subtract(1, ’weeks’), endDate: moment().endOf(’day’) } return ( <Modal destroyOnClose title=’按時間段導(dǎo)出’ centered keyboard={false} maskClosable={false} visible={modalVisible} confirmLoading={submitting} onOk={this.okHandle} onCancel={() => handleModalVisible()} > <FormItem {...formItemLayout} label=’時間段’ extra=’最長可導(dǎo)出最近6個月數(shù)據(jù)’> {getFieldDecorator(’range-picker’,{ initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate] })( <RangePicker disabledDate={this.disabledDate} /> )} </FormItem> </Modal> ); }}export default ExportModal;

以上這篇ant design vue中日期選擇框混合時間選擇器的用法說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。