ant design vue中日期選擇框混合時間選擇器的用法說明
首先時間格式化用到moment方法,需要在頁面中引入moment組件
import moment from 'moment'
結(jié)構(gòu)代碼:
<a-date-picker style="width:100%" :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è)置的默認展示時間,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默認選擇日期及限制日期可選范圍
主要做了兩個設(shè)置:
1、初始化默認選擇日期;
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='按時間段導出' centered keyboard={false} maskClosable={false} visible={modalVisible} confirmLoading={submitting} onOk={this.okHandle} onCancel={() => handleModalVisible()} > <FormItem {...formItemLayout} label='時間段' extra='最長可導出最近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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式
這篇文章主要介紹了使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05vue.js el-table動態(tài)單元格列合并方式
這篇文章主要介紹了vue.js el-table動態(tài)單元格列合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02詳解vue中$nextTick和$forceUpdate的用法
這篇文章主要介紹了詳解vue中$nextTick和$forceUpdate的用法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12