欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ant design vue中日期選擇框混合時間選擇器的用法說明

 更新時間:2020年10月27日 11:04:46   作者:溫九月  
這篇文章主要介紹了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)文章

  • vue中兄弟組件傳值的兩種方式小結(jié)

    vue中兄弟組件傳值的兩種方式小結(jié)

    這篇文章主要介紹了vue中兄弟組件傳值的兩種方式小結(jié),具有很好的參考價值,希望對大家有所幫助。
    2022-07-07
  • 使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

    使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

    這篇文章主要介紹了使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • vue自動添加瀏覽器兼容前后綴操作

    vue自動添加瀏覽器兼容前后綴操作

    這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue中用JSON實現(xiàn)刷新界面不影響倒計時

    Vue中用JSON實現(xiàn)刷新界面不影響倒計時

    這篇文章主要為大家詳細介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • vue單選按鈕,選中如何改變其當前按鈕顏色

    vue單選按鈕,選中如何改變其當前按鈕顏色

    這篇文章主要介紹了vue單選按鈕,選中如何改變其當前按鈕顏色。具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • VUE組件簡明講解

    VUE組件簡明講解

    組件是什么?組件是用基礎(chǔ)的元素組成的復雜的、可以重復使用的代碼單元,就相當于疊疊樂一樣的快件,可以將這些復用的代碼封裝其起來構(gòu)成的組件可需要的時候進行調(diào)用
    2022-08-08
  • Vue動態(tài)路由緩存不相互影響的解決辦法

    Vue動態(tài)路由緩存不相互影響的解決辦法

    這篇文章主要介紹了Vue動態(tài)路由緩存不相互影響的解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-02-02
  • vue.js el-table動態(tài)單元格列合并方式

    vue.js el-table動態(tài)單元格列合并方式

    這篇文章主要介紹了vue.js el-table動態(tài)單元格列合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • 詳解vue中$nextTick和$forceUpdate的用法

    詳解vue中$nextTick和$forceUpdate的用法

    這篇文章主要介紹了詳解vue中$nextTick和$forceUpdate的用法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • 解析Vue 2.5的Diff算法

    解析Vue 2.5的Diff算法

    本文將對于Vue 2.5.3版本中使用的Virtual Dom進行分析。updataChildren是Diff算法的核心,所以本文對updataChildren進行了圖文的分析。下面通過本文給大家分享Vue 2.5的Diff算法,需要的朋友參考下吧
    2017-11-11

最新評論