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

待我称王封你为后i 2022-12-06 15:52 674阅读 0赞

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

### 日期选择 ###

先看效果：

![20200914141951860.png][]

这个是初始化时间时展示的样子，每次展示的是当前月份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'],
    },

### 月份选择 ###

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

选择的时候：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

选择完成后：![2021031514590771.png][]

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

<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>

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

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

[20200914141951860.png]: /images/20221123/cb844f85c985480eb80451098d85f2f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221123/61f76d10ecda41e6bc85d85d649bf373.png
[2021031514590771.png]: /images/20221123/ae8bc17795154ddf834ec9414b830376.png
[Link 1]: https://www.antdv.com/components/date-picker/#components-date-picker-demo-controlled-panels