ant design vue中日期选择框混合时间选择器的用法说明


Posted in Javascript onOctober 27, 2020

首先时间格式化用到moment方法,需要在页面中引入moment组件

import moment from 'moment'

结构代码:

<a-date-picker
   style="width:100%"
   :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中日期选择框混合时间选择器的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
原生JS实现京东查看商品点击放大
Dec 21 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 #Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 #Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
You might like
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
php集成开发环境详解
2019/09/24 PHP
javascript 写类方式之二
2009/07/05 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
opencv 查找连通区域 最大面积实例
2020/06/04 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python常用类型转换实现代码实例
2020/07/28 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
《胡杨》教学反思
2014/02/16 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
师德模范事迹材料
2014/06/03 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
钱学森观后感
2015/06/04 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python