代码编织梦想

实现效果如图

在这里插入图片描述

// 公共组件
<template>
  <a-range-picker v-model:value="selectedRange" :presets="computedPresets" @change="handleChange"
    :format="selectedFormat" :value-format="selectedValueFormat" :picker="picker" />
</template>

// 引入vue的辅助函数和dayjs库
<script setup>
import { ref, computed } from 'vue'
import { defineProps, defineEmits } from 'vue' // 引入Vue的辅助函数
import dayjs from 'dayjs'

// 定义组件的props
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  picker: { // 添加 picker 属性
    type: String,
    default: 'date' // 默认为 date
  }
})

// 定义组件的emits
const emits = defineEmits(['update:value', 'change'])

// 定义组件的响应式数据
const selectedRange = ref(props.value)

// 根据 picker 的值动态选择日期格式
const selectedFormat = computed(() => {
  return props.picker === 'month' ? 'YYYY-MM' : props.format
})

const selectedValueFormat = computed(() => {
  return props.picker === 'month' ? 'YYYY-MM' : props.valueFormat
})

// 根据 picker 的值动态选择日期范围选项
const computedPresets = computed(() => {
  if (props.picker === 'month') {
    return rangePresets.filter(preset => preset.label !== '本周' && preset.label !== '上周')
  } else {
    return rangePresets
  }
})

// 计算日期范围的起始日期
const today = dayjs()
const startOfThisWeek = today.startOf('week') // 当前周的开始日期
const startOfThisMonth = today.startOf('month') // 当前月的开始日期
const startOfLastWeek = startOfThisWeek.subtract(1, 'week') // 上周的开始日期
const startOfLastMonth = startOfThisMonth.subtract(1, 'month') // 上个月的开始日期
const startOfLastYear = today.subtract(1, 'year').startOf('year') // 去年的开始日期
const startOfThreeYearsAgo = today.subtract(3, 'year').startOf('year') // 近三年的开始日期
const endOfLastYear = startOfLastYear.endOf('year') // 去年的结束日期
const rangePresets = [
  { label: '本周', value: [startOfThisWeek, today] },
  { label: '上周', value: [startOfLastWeek, startOfThisWeek.subtract(1, 'day')] },
  { label: '本月', value: [startOfThisMonth, today] },
  { label: '上个月', value: [startOfLastMonth, startOfThisMonth.subtract(1, 'day')] },
  { label: '本年', value: [dayjs().startOf('year'), today] },
  { label: '去年', value: [startOfLastYear, endOfLastYear] },
  { label: '近三年', value: [startOfThreeYearsAgo, today] }
]

// 定义组件的事件处理函数
const handleChange = (value) => {
  selectedRange.value = value
  emits('update:value', value)
  emits('change', value)
}
</script>

// main.js
// 全局引入
import rangeSelect from '@/components/Select/selectionRange.vue'
app.component('range-select', rangeSelect )
// 页面使用例子
<range-select v-model:value="queryParams.date" :picker="'month'" /> 
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46603570/article/details/137688181

VUE时间选择器a-range-picker使用,并且动态绑定默认值-爱代码爱编程

VUE时间选择器a-range-picker使用,并且动态绑定默认值 时间选择器 时间选择器 <a-range-picker v-if="form.dateFrom" v-model="form.invalidTime" :default-value="[moment(`${form.dateFrom.substring(0,10)

Ant Design Vue 时间选择器 自定义时间-爱代码爱编程

vue Ant Design a-range-picker自定义时间 要实现的效果 ,选择时间时,需要添加 昨天,今天,上周,本月,本季度等筛选条件 步骤 自定义 rangeDate.jsimport moment from 'moment' const rangeDate = { data() { return {

ant design vue之a-range-picker 预设常用的日期范围_weixin_38673922的博客-爱代码爱编程

<a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" allow-clear @change="bptjTimeChange" :ranges="rang

前端 vue antd ui库a-range-picker 时间限制_述。一牛的博客-爱代码爱编程

今日、昨日、近7天、近30天、自定义 进入页面默认选择今日 自定义:时间选择跨度最多31天,只能选择当前日期之前的半年时间(前端限制) <template> <div class="selec

vue3+ant-design-vue a-range-picker设置可选时间和默认时间_chocolate_nan的博客-爱代码爱编程

1.设置可选时间为7天内 通过添加属性disabledDate和calendarChange事件来限制可选区间。 <a-range-picker @change="changTime" v-model:

日期选择框 rangepicker,默认一个时间到今天时间,封装好的组件-爱代码爱编程

Ant Design - 一个 UI 设计语言   import { DatePicker} from 'antd'; import 'moment/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; import moment from 'moment';

vue3+antdesginvue+ts a-range-picker(日期时间组件)动态选择跨度不能大于1年-爱代码爱编程

vue3+antdesginVue+ts a-range-picker(日期时间组件)动态选择跨度不能大于1年 话不多说,先上效果 <a-form layout="inline"> <

vue中 a-range-picker的使用-爱代码爱编程

使用时间范围选择控件:设置初始值,获取值和清空 <a-form-item label="时间" format="YYYY-MM-DD" > <a-ran

ant-爱代码爱编程

        在使用Ant-Design-Vue中的时间范围选择器开发个人项目时,发现默认显示为英文。如何解决呢? date-picker分类         Antd-Vue提供了DatePicker、MonthPicker、RangePicker、WeekPicker 几种类型的时间选择器,分别用于选择日期、月份、日期范围、周范围。  

ant-爱代码爱编程

1、npm install moment // 安装moment 2、全局配置main.js import moment from "moment"; Vue.prototype.$moment = moment 3、

vue3+antd a-爱代码爱编程

背景:         当使用antd组件库的a-range-picker组件时,有时候会对此组件在日期选择范围时进行限制,比如7天等。 实现逻辑:   实现代码:        html: <a-range-picker v-model:value="searchTime" class="timeInput" @change="