Ant Design Vue日期选择器DatePicker 的 a-range-picker的时间格式及设置日期

简单的日期选择器范围选择

日期选择

先看效果：

这个是初始化时间时展示的样子，每次展示的是当前月份1号到目前日期。

实现部分：

这一段实现的效果是初始化时设置当前月份一号到目前的日期，然后在重置时删除选择器内的内容，并可以选择修改等

 

初始化实现设置日期的代码是：

this.ondateChange([moment().startOf('month'), moment()]);

因为在ondateChange时间内，我们才可以拿到组件返回的时间，所以通过组件的值改变事件来设置时间，

ondateChange(date, dateString) {
	console.log("date, dateString",date, dateString)
	this.dateData = date;
	this.queryParam.startDate = date[0].format('YYYY-MM-DD')
	this.queryParam.endDate = date[1].format('YYYY-MM-DD')
},

组件重置的时候将值设置为空即可

this.dateData = []

 

自定义分页实现：

pagination:{
  defaultPageSize:20,
  showTotal: total => `共 ${total} 条数据`,
  showSizeChanger:true,
  pageSizeOptions: ['10', '20'],
},

 

因为上面的代码是删减后未测试的，有的东西实现可以参考，例如这里的分页实现以及时间等，有什么问题欢迎留言！！！