antd-DatePicker组件获取时间值,及相关设置方式

2024-09-29 20:41:19

DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。

import moment from "moment";

import "moment/locale/zh-cn"

format属性，设置日期的格式，如“2020-02-28”。

设置日期

选择日期是今天之前【包含今天】

需要和moment搭配应用

// 设置默认的起始日期
    const disabledDate = (current) => {
      console.log(current)
      return current > moment().startOf('day');
    }
    <DatePicker disabledDate={disabledDate}

效果如下图：

如果是选择今天之后的日期【包含今天】

    const disabledDate = (current) => {
      console.log(current)
      return current > moment().startOf('day');
    }

如图：

关于moment的API，可以参考 moment 的具体文档

获取时间值

官网提供的函数：

function onChange(date, dateString) {
 console.log(date, dateString);
 // date 就是原始的日期数值，dateString 就是我们需要的日期格式
}

如果DatePicker组件嵌套在form表单里面，有两种方式获取日期值

第一种方式：

使用官网提供的函数，并在State中设置日期参数

constructor(){
  super()
  this.state={
    date:""
  }
}

onChange = (value,dateString)=>{
  this.setState({
    date:dateString
  })
}

  handleSubmit1 = e => {
    const that = this;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values.date)
        that.setState({
          date: that.state.date
        })
        that.getData(1, 10, that.state.date);
      }
    });
  };

<Form className="ant-advanced-search-form" onSubmit={this.handleSubmit1}>
            <div className="search-report">
              <Form.Item label="日期">
                {getFieldDecorator('date', {
                  rules: [
                    {
                      required: false,
                      message: '选择日期',
                    },
                  ],
                })(<DatePicker onChange={this.onChange} format="YYYY-MM-DD" placeholder="选择日期" />)}

              </Form.Item>
              <Button type="primary" htmlType="submit">查询</Button>
            </div>
          </Form>

这种方式在提交表单的时候，直接从state中获取日期参数值。

第二种方式：

使用moment转换日期

  handleSubmit3 = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      const data = moment(values.date).format('YYYY-MM-DD')
      console.log(data)
    });
  };

补充知识：moment.js可以通过 .format()方法将时间变成字符串：

我就废话不多说了，就是一行代码的事，来看看吧~

moment(moment().add(1, 'M')).format(dateFormat)

以上这篇antd-DatePicker组件获取时间值,及相关设置方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Ant Design moment对象和字符串之间的相互转化教程

moment对象转字符串 values.saleStartTime=values.saleStartTime.format('YYYY-MM-DD'); 字符串转moment对象 this.model.saleStartTime=moment(record.saleStartTime); 补充知识:vue ant design 的日期组件range-picker表单中进行moment赋值问题官方文档这样写参数说明类型 showTime.defaultValue 设置用户选择日期时默认的时
ant-design-vue 时间选择器赋值默认时间的操作

我就废话不多说了,大家还是直接看代码吧~ <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码 @change="onChangeTime" ><
基于ant design日期控件使用_仅月份的操作

总体效果: 展开后: 选值后: 代码部分: 1.引入: import { DatePicker } from 'antd'; 2.主体部分: export default class PersonInfo extends Component{ constructor() { super(); //设置状态,存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引用 const {Ra
ant design 日期格式化的实现

今天写项目的时候用到ant design中的日期组件,但是由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换第一种写法我取得的值是年月如:201806 第二种写法 moment().format('YYYY-MM-DD') 第三种写法 moment(Date.now()).format('YYYY-MM-DD') 获取本地日期的下个月 window.moment().add(1, 'months') 获取当前日
ant-design表单处理和常用方法及自定义验证操作

首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百度的san-xui组件库的表单验证也是依赖与async-validator.说明这个库的实用性还是比较高,可以多了解一下. 首先按照antDesign官网Demo.我们可以copy一个Form表单的demo. LoginForm是表单的组件,下面代码,是React 高阶组件(Hoc). 用于使组件获
ant design vue中日期选择框混合时间选择器的用法说明

首先时间格式化用到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="[ 'pu
解决ant design vue中树形控件defaultExpandAll设置无效的问题

页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值结果: 设置defaultExpandAll无效,并不能展开所有节点原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe
antd-DatePicker组件获取时间值,及相关设置方式

DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment. import moment from "moment"; import "moment/locale/zh-cn" format属性,设置日期的格式,如"2020-02-28". 设置日期选择日期是今天之前[包含今天] 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { consol
python执行系统命令后获取返回值的几种方式集合

第一种情况 os.system('ps aux') 执行系统命令,没有返回值第二种情况 result = os.popen('ps aux') res = result.read() for line in res.splitlines(): print line 执行系统命令,可以获取执行系统命令的结果 p = subprocess.Popen('ps aux',shell=True,stdout=subprocess.PIPE) out,err = p.communicate() for
解决antd datepicker 获取时间默认少8个小时的问题

1.扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //
antd Form组件方法getFieldsValue获取自定义组件的值操作

自定义组件 1.自定义组件被getFieldsValue包裹,会获得以下属性 onChange方法, 子组件调用此方法,可将值传给父组件,从而Form可拿到自定义组件的值 value属性,获得初始值 2.组件调用像Form表单内的组件一样调用,就可以了补充知识:Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值其实用setFieldsValue或者获取setState方法都可以设置DatePi
vue时间组件DatePicker组件的手写示例

概述在日常工作中,比不可少会用到时间组件,我们的第一反应就是直接到组件库去找一下现成的来用下,毕竟,时间组件看起来还是很复杂的,对于没接触过的人来说,要自己去写一个这样的组件出来,还是有难度的,但是作为一名前端开发,这么常见的组件,我们还是值得取自己写一个这样的组件的,现在就手把手带你实现vue中的DatePicker组件.看完不会找我. 前置知识在开始写代码之前,建议代价先看看时间组件的布局,目前主流的组件库iview ,element等提供的时间组件布局都基本类似,功能也差不多,因此在这
sqlserver获取当前日期的最大时间值

那你也许会问及,怎样获取当前系统日期的最大时间值,如yyyy-MM-dd 23:59:59.997. 我们可以使用DATEADD函数,来实现,以当前日期的午夜时间值加一天,即得到第二天的午夜时间值,然后再减去3秒,即可以获取当前系统日期的最大时间值. 复制代码代码如下: DECLARE @Date DATETIME = CURRENT_TIMESTAMP --当前系统日期时间 DECLARE @midnight DATETIME SET @midnight = CAST(CAST(@Date
mint-ui 时间插件使用及获取选择值的方法

如下所示: <div > {{pickerValue}}</div> <mt-datetime-picker ref="picker" 每一个都要填上这一条open type="time" @confirm="handleConfirm" 设置点击确定 v-model="pickerValue"> </mt-datetime-picker> data () { return {
vue实现父组件获取子组件的方法或属性值详解

目录父组件获取子组件方法或属性值这里主要使用了vue的$ref 父组件获取子组件中的变量案例一:点击父组件的按钮,操作子组件显示案列二:获取子组件data中的变量父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法目标:我需要实现一个在父组件
vue中实现子组件接收父组件方法并获取返回值

目录子组件接收父组件方法并获取返回值父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法子组件接收父组件方法并获取返回值项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示
Mint-UI时间组件起始时间问题及时间插件使用

在使用Mint-UI的时候,官方的demo是这样的 <template> <mt-datetime-picker ref="picker" type="time" v-model="pickerValue"> </mt-datetime-picker> </template> <script> export default { methods: { openPicker() { this

antd-DatePicker组件获取时间值,及相关设置方式

相关推荐

随机推荐