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

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

日期选择

先看效果：

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

实现部分：

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

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="8" :sm="8">
            <a-form-item label="时间">
              <a-range-picker :value="dateData" @change="ondateChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
      </a-table>
    </div>

  </a-card>
</template>

<script>
  import moment from 'moment';
  import 'moment/locale/zh-cn';

  export default {
    data () {
      return {
        description: '',
        dateData: [],
        data: [],
        queryParam: {},
        pagination:{
          defaultPageSize:10,
          showTotal: total => `共 ${total} 条数据`,
          showSizeChanger:true,
          pageSizeOptions: ['10', '20'],
        },
        columns,
		url: {
            list: "/list", // 这里是你自己的查询数据的链接
        },
      }
    },
    created () {
      this.queryData();
    },
    methods: {
      queryData(){
        getAction(this.url.list, this.queryParam).then(res => {
          if(res.success){
            this.data = res.result;
          }else{
            this.$message.error(res.message)
          }
          this.loading = false;
        })
        this.queryParam.startDate = moment().startOf('month').format('YYYY-MM-DD')
        this.queryParam.endDate = moment().format('YYYY-MM-DD')
        this.ondateChange([moment().startOf('month'), moment()]);
      },

      ondateChange(date, dateString) {
        this.dateData = date;
        this.queryParam.startDate = date[0].format('YYYY-MM-DD')
        this.queryParam.endDate = date[1].format('YYYY-MM-DD')
      },
      searchQuery() {
        this.loading = true;
        getAction(this.url.list, this.queryParam).then(res => {
          if(res.success){
            this.data = res.result;
          }else{
            this.$message.error(res.message)
          }
          this.loading = false;
        })
      },
      searchReset() {
        this.queryParam = {}
        this.dateData = []
        this.loadData(1)
      },
    }
  }
</script>
<style scoped>
</style>

 

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

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'],
},

 

月份选择

实现的代码例子是这样的：

选择的时候：

选择完成后：

如图，可以发现在选择的时候样子，代码如下：

<template>
  <div>
    <a-form layout='inline'>
      <a-form-item label='查询时间'>
        <a-range-picker @panelChange="handlePanelChange2" :value="dateData" format="YYYY-MM" :mode="mode1"/>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode1: ['month', 'month'],
      dateData: [],
      queryParam: {}
    }
  },
  methods: {
    handlePanelChange2(value, mode) {
      this.dateData = value;
      this.queryParam.startTime = value[0].format('YYYY-MM');
      this.queryParam.endTime = value[1].format('YYYY-MM');
      this.mode1 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
    },
    searchResets() {
      this.queryParam = {};
      this.dateData = [];
    }
  }
}
</script>
<style scoped>
</style>

这个还是和上述代码有些差异的，需要对比打印发现。相信你们一看就会，我就不解释第二段的代码了，看官网吧！

 

 

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