初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script lang="ts" setup>
import { computed, ref, unref, watch } from 'vue';
 
import { useAttrs } from '@jnpf/hooks';
import { getDateFormat, getDateTimeUnit } from '@jnpf/utils';
 
import { RangePicker } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
 
import { dateRangeProps } from './props';
 
defineOptions({ inheritAttrs: false, name: 'JnpfDateRange' });
const props = defineProps(dateRangeProps);
const emit = defineEmits(['update:value', 'change']);
const attrs: any = useAttrs({ excludeDefaultKeys: false });
const innerValue = ref<[string, string] | undefined>(undefined);
 
const getFormat = computed(() => getDateFormat(props.format || 'YYYY-MM-DD'));
const getShowTime = computed(() => unref(getFormat) === 'YYYY-MM-DD HH:mm' || unref(getFormat) === 'YYYY-MM-DD HH:mm:ss');
const getPicker = computed(() => {
  if (unref(getFormat) === 'YYYY') return 'year';
  if (unref(getFormat) === 'YYYY-MM') return 'month';
  return 'date';
});
const getRealStartTime = computed(() => {
  const format = unref(getFormat);
  if (!props.startTime || format === 'YYYY-MM-DD HH:mm:ss') return props.startTime;
  const startTime = dayjs(props.startTime).startOf(getDateTimeUnit(format)).valueOf();
  return startTime;
});
const getRealEndTime = computed(() => {
  const format = unref(getFormat);
  if (!props.endTime || format === 'YYYY-MM-DD HH:mm:ss') return props.endTime;
  const endTime = dayjs(props.endTime).endOf(getDateTimeUnit(format)).valueOf();
  return endTime;
});
const getBindValue = computed(() => ({
  ...unref(attrs),
  disabledDate: (current: Dayjs) => {
    const startTime = unref(getRealStartTime);
    const endTime = unref(getRealEndTime);
    if ((!startTime && !endTime) || !current) return false;
    const currentDate = current.valueOf();
    if (startTime && endTime) return startTime > currentDate || endTime < currentDate;
    if (startTime) return startTime > currentDate;
    if (endTime) return endTime < currentDate;
    return false;
  },
  format: unref(getFormat),
  placeholder: props.placeholder,
  showTime: Reflect.has(unref(attrs), 'showTime') ? unref(attrs).showTime : unref(getShowTime),
  valueFormat: unref(getFormat),
}));
 
watch(
  () => unref(props.value),
  (val) => {
    setValue(val);
  },
  { immediate: true },
);
 
function setValue(value) {
  if (!value || value.length === 0) return (innerValue.value = undefined);
  innerValue.value = value.map((o) => dayjs(o).format(unref(getFormat)));
}
function onChange(date) {
  date = date || [];
  const timestamp: number[] = date.map((o) => dayjs(o).valueOf());
  emit('update:value', timestamp);
  emit('change', timestamp);
}
</script>
 
<template>
  <RangePicker v-bind="getBindValue" v-model:value="innerValue" :picker="getPicker" @change="onChange" />
</template>