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实现漂亮的动态信息提示效果
Aug 02 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
js实现3D旋转效果
Aug 18 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
js图片预加载示例
2014/04/30 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
python实现无证书加密解密实例
2014/10/27 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python assert语句的简单使用示例
2019/07/28 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
绩效考核实施方案
2014/03/18 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis