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

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'); }

效果如下图：

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

const disabledDate = (current) => { console.log(current)

return current > moment().startOf('day'); }

如图：

关于moment的API，可以参考 的具体⽂档获取时间值官⽹提供的函数：

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); } }); };

这种⽅式在提交表单的时候，直接从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组件获取时间值,及相关设置⽅式就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。