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

import moment from ’moment’

結構代碼：

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

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

下面是方法代碼：

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默認選擇日期及限制日期可選范圍

主要做了兩個設置：

1、初始化默認選擇日期；

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

具體實現代碼出下：

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=’按時間段導出’ centered keyboard={false} maskClosable={false} visible={modalVisible} confirmLoading={submitting} onOk={this.okHandle} onCancel={() => handleModalVisible()} > <FormItem {...formItemLayout} label=’時間段’ extra=’最長可導出最近6個月數據’> {getFieldDecorator(’range-picker’,{ initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate] })( <RangePicker disabledDate={this.disabledDate} /> )} </FormItem> </Modal> ); }}export default ExportModal;

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