时间选择器

element样式 和搜索功能 vue2

 <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="queryParams.time"
              type="daterange"
              range-separator="至"
              @change="changeTime"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
 
 changeTime(e, val) {
      if (e) {
        this.queryParams.startTime = e[0];
        this.queryParams.endTime = e[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
    },
 
    getList() {
      this.loading = true;
      let mData = JSON.parse(JSON.stringify(this.queryParams));
      mData.userIds = store.getters.userId;
      getList(mData).then((response) => {
        this.remindersList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

 element样式  vue2利用dayjs插件实现搜索功能

 <el-date-picker
              v-model="queryParams.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
 
 
 
import dayjs from "dayjs";
 
  getList() {
      // this.getTime();
      let mData = Object.assign(
        {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
        },
        // this.queryParams
        {
          ...this.queryParams,
          startTime: this.queryParams?.date?.length
            ? dayjs(this.queryParams.date[0]).format("YYYY-MM-DD")
            : undefined,
          endTime:
            this.queryParams?.date?.length > 1
              ? dayjs(this.queryParams.date[1]).format("YYYY-MM-DD")
              : undefined,
        }
      );
      mData.createUserId = store.getters.userId;
      this.loading = true;
      listDemo(mData)
        .then((res) => {
          if (res.code == 200) {
            console.log("res", res);
            this.remindersList = res.rows;
            console.log("this.remindersList", this.remindersList);
            this.pagination.total = res.total;
            this.loading = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

antd样式和搜素功能 vue3

  <a-range-picker
        v-model:value="date"
        :placeholder="[str, end]"
        separator="至"
        valueFormat="YYYY-MM-DD"
      >
        <template #suffixIcon>
          <down-outlined />
          <!-- <img src="@/assets/dispatch/arrow-down.png" /> -->
        </template>
      </a-range-picker>
 
 
onMounted(() => {
  getDate();
});
// 时间
const getTime = () => {
  if (date.value[0] && date.value[1]) {
    form.startDate = date.value[0];
    form.endDate = date.value[1];
  }
  console.log("form.startDate", form.startDate);
  console.log("form.endDate", form.endDate);
};
const getDate = () => {
  getTime();
  loading.value = true;
  warmEventsList.value = [];
  warmEvents({
    current: pagination.current,
    size: pagination.pageSize,
    startDate: form.startDate,
    endDate: form.endDate,
  }).then((res) => {
    if (res.code == 0) {
      loading.value = false;
      // console.log("res11111", res);
      const { records, current, size, total } = res?.data ?? {};
      // console.log("records", records);
      if (total === 0) {
        return;
      }
 
      warmEventsList.value = records;
      pagination.current = current;
      pagination.pageSize = size;
      pagination.total = total;
    }
  });
};