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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
js脚本实现数据去重
Nov 27 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
webpack常用配置总览(小结)
Nov 18 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 include的妙用,实现路径加密
2008/07/29 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
js变量提升深入理解
2016/09/16 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python如何处理程序无法打开
2020/06/16 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
什么时候用assert
2015/05/08 面试题
Unix/Linux开发面试题
2016/08/16 面试题
团队拓展活动方案
2014/08/28 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
暑期社会实践证明书
2014/11/17 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python