时间:2021-05-25
总体效果:
展开后:
选值后:
代码部分:
1、引入:
import { DatePicker } from 'antd';
2、主体部分:
export default class PersonInfo extends Component{ constructor() { super(); //设置状态,存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引用 const {RangePicker} = DatePicker; return( <RangePicker placeholder={['开始日期', '结束日期']} format="YYYY-MM" value={this.state.workValue} mode={this.state.workMode} onPanelChange={this.workHandlePanelChange} onChange={this.workOnChange} />函数:
//日期面板时间值改变事件workHandlePanelChange = (value, mode) => { this.setState({ workValue:value, workMode: [ mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1], ], }); } //日期清空时触发 workOnChange = () => { this.setState({ workMode: ['month', 'month'], workValue: [], }) }获取日期值:
//其中this.state.workValue的两个值都是毫秒,formatDate为自写的转换函数let workYearBegin = this.formatDate(this.state.workValue[0]);let workYearEnd = this.formatDate(this.state.workValue[1]);formatDate = (time) => { if(!time){ return ''; } let date = new Date(time);//毫秒转换成日期 let year = date.getFullYear(); let month = (date.getMonth() + 1).toString().padStart(2,'0');//月份不足两位数在前面补0 return year + '-' + month;//格式控制 }补充知识:eact使用ant时设置DatePicker日期控件中文显示
方式一:局部设置
import 'moment/locale/zh-cn';import locale from 'antd/lib/date-picker/locale/zh_CN';//调用时引用locale<DatePicker format="YYYY-MM-DD" placeholder="" locale={locale}/>方式二:全局设置
import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');其实官方文档上面都有,还是要多看文档
Ant Design:https://ant.design/index-cn
以上这篇基于ant design日期控件使用_仅月份的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
问题在vue-cli4.x中按需加载ant-design-vue,在编译时报错,错误如下原因ant-design-vue使用less预处理器。在less3.0版
1.使用背景新项目中使用了ant-design-vue组件库.该组件库完全根基数据双向绑定的模式实现.只有表单组件提供少量的方法.所以,在使用ant-desig
1.使用版本vite:2.0ant-design-vue:2.0.0-rc.8vue:3.0.52.安装vite插件yarnaddvite-plugin-sty
在ng-alain中,使用ng-zorro图标库,发现部分能正常显示,部分并不能显示,在控制台同时发现出错报错。ERRORError:[@ant-design/
在ant-design-vue的文档中,menu有两个可以传的参数,分别为defaultOpenKeys和openKeys,但在接手做一个项目时,openKey