首先時(shí)間格式化用到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ā)布時(shí)間!’ }] } ]' :showTime='{ defaultValue: moment(’00:00:00’, ’HH:mm:ss’) }' :disabledDate='disabledDate' :disabledDateTime='disabledDateTime' placeholder='請選擇時(shí)間' @change='onChange' @ok='onOk' />

其中，showTime.defaultValue是設(shè)置的默認(rèn)展示時(shí)間，disabledDate為禁用日期，disabledDataTime為禁用時(shí)間，詳細(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] } }}

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

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

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

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

具體實(shí)現(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); }); }; // 不可選擇的時(shí)間段 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=’按時(shí)間段導(dǎo)出’ centered keyboard={false} maskClosable={false} visible={modalVisible} confirmLoading={submitting} onOk={this.okHandle} onCancel={() => handleModalVisible()} > <FormItem {...formItemLayout} label=’時(shí)間段’ extra=’最長可導(dǎo)出最近6個(gè)月數(shù)據(jù)’> {getFieldDecorator(’range-picker’,{ initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate] })( <RangePicker disabledDate={this.disabledDate} /> )} </FormItem> </Modal> ); }}export default ExportModal;

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