github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): use dayjs

pull/7611/head
DarkPhoenix2704 9 months ago
parent
bd153debe2
commit
0b657a86e3
2 changed files with 79 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      packages/nc-gui/components/nc/DateWeekSelector.vue
  2. 126
      packages/nc-gui/components/nc/MonthYearSelector.vue

77
packages/nc-gui/components/nc/DateWeekSelector.vue
Unescape View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import dayjs from 'dayjs'
interface Props {
selectedDate?: Date | null
isDisabled?: boolean
@ -43,92 +44,90 @@ const currentMonth = computed(() => {
return `${pageDate.value.toLocaleString('default', { month: 'long' })} ${pageDate.value.getFullYear()}`
})
const selectWeek = (date: Date) => {
const selectWeek = (date: dayjs.Dayjs) => {
if (!date) return
const dayOffset = props.isMondayFirst ? 1 : 0
const dayOfWeek = (date.getDay() - dayOffset + 7) % 7
const startDate = new Date(date)
startDate.setDate(date.getDate() - dayOfWeek)
const dayOfWeek = (date.get('day') - dayOffset + 7) % 7
const startDate = date.subtract(dayOfWeek, 'day')
selectedWeek.value = {
start: startDate,
end: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 6),
start: startDate.toDate(),
end: startDate.endOf('week').toDate(),
}
}
// Generates all dates should be displayed in the calendar
// Includes all blank days at the start and end of the month
const dates = computed(() => {
const startOfMonth = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), 1)
const startOfMonth = dayjs(pageDate.value).startOf('month')
const dayOffset = props.isMondayFirst ? 1 : 0
const dayOfWeek = (startOfMonth.getDay() - dayOffset + 7) % 7
startOfMonth.setDate(startOfMonth.getDate() - dayOfWeek)
const firstDayOfWeek = startOfMonth.day()
const startDay = startOfMonth.subtract((firstDayOfWeek - dayOffset + 7) % 7, 'day')
const datesArray = []
while (datesArray.length < 42) {
datesArray.push(new Date(startOfMonth))
startOfMonth.setDate(startOfMonth.getDate() + 1)
for (let i = 0; i < 42; i++) {
datesArray.push(startDay.add(i, 'day'))
}
return datesArray
})
// Check if the date is in the selected week
const isDateInSelectedWeek = (date: Date) => {
const isDateInSelectedWeek = (date: dayjs.Dayjs) => {
if (!selectedWeek.value) return false
return date >= selectedWeek.value.start && date <= selectedWeek.value.end
return date.isBetween(selectedWeek.value.start, selectedWeek.value.end, 'day', '[]')
}
// Used to check if two dates are the same
const isSameDate = (date1: Date, date2: Date) => {
const isSameDate = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
if (!date1 || !date2) return false
return (
date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear()
)
return date1.isSame(date2, 'day')
}
// Used in DatePicker for checking if the date is currently selected
const isSelectedDate = (dObj: Date) => {
const isSelectedDate = (dObj: dayjs.Dayjs) => {
if (!selectedDate.value) return false
const propDate = new Date(selectedDate.value)
const propDate = dayjs(selectedDate.value)
return props.selectedDate ? isSameDate(propDate, dObj) : false
}
const isDayInPagedMonth = (date: Date) => {
return date.getMonth() === pageDate.value.getMonth()
const isDayInPagedMonth = (date: dayjs.Dayjs) => {
return date.month() === pageDate.value.getMonth()
}
// Since we are using the same component for week picker and date picker we need to handle the date selection differently
const handleSelectDate = (date: Date) => {
const handleSelectDate = (date: dayjs.Dayjs) => {
if (props.weekPicker) {
selectWeek(date)
} else {
if (!isDayInPagedMonth(date)) {
pageDate.value = new Date(date)
emit('update:pageDate', date)
pageDate.value = date.toDate()
emit('update:pageDate', date.toDate())
}
selectedDate.value = date
emit('update:selectedDate', date)
selectedDate.value = date.toDate()
emit('update:selectedDate', date.toDate())
}
}
// Used to check if a date is in the current month
const isDateInCurrentMonth = (date: Date) => {
return date.getMonth() === pageDate.value.getMonth()
const isDateInCurrentMonth = (date: dayjs.Dayjs) => {
return date.month() === pageDate.value.getMonth()
}
// Used to Check if an event is in the date
const isActiveDate = (date: Date) => {
return activeDates.value.some((d) => isSameDate(d, date))
const isActiveDate = (date: dayjs.Dayjs) => {
return activeDates.value.some((d) => isSameDate(dayjs(d), date))
}
// Paginate the calendar
const paginate = (action: 'next' | 'prev') => {
const newDate = new Date(pageDate.value)
let newDate = dayjs(pageDate.value)
if (action === 'next') {
newDate.setMonth(newDate.getMonth() + 1)
newDate = newDate.add(1, 'month').clone()
} else {
newDate.setMonth(newDate.getMonth() - 1)
newDate = newDate.subtract(1, 'month').clone()
}
pageDate.value = newDate
emit('update:pageDate', newDate)
pageDate.value = newDate.toDate()
emit('update:pageDate', newDate.toDate())
}
</script>
@ -163,15 +162,15 @@ const paginate = (action: 'next' | 'prev') => {
'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !weekPicker,
'nc-selected-week z-1': isDateInSelectedWeek(date) && weekPicker,
'text-gray-400': !isDateInCurrentMonth(date),
'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
'nc-selected-week-start': isSameDate(date, dayjs(selectedWeek?.start)),
'nc-selected-week-end': isSameDate(date, dayjs(selectedWeek?.end)),
}"
class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
@click="handleSelectDate(date)"
>
<span v-if="isActiveDate(date)" class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
<span class="z-2">
{{ date.getDate() }}
{{ date.get('date') }}
</span>
</span>
</div>

126
packages/nc-gui/components/nc/MonthYearSelector.vue
Unescape View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import dayjs from 'dayjs'
interface Props {
selectedDate?: Date | null
isDisabled?: boolean
@ -12,20 +14,16 @@ const props = withDefaults(defineProps<Props>(), {
pageDate: new Date(),
yearPicker: false,
})
const emit = defineEmits(['update:selected-date', 'update:page-date'])
const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
const pageDate = useVModel(props, 'pageDate', emit)
const selectedDate = useVModel(props, 'selectedDate', emit)
const years = computed(() => {
const date = new Date(pageDate.value)
const startYear = date.getFullYear()
const endYear = date.getFullYear() + 11
const years = []
for (let i = startYear; i <= endYear; i++) {
years.push({
label: i,
value: new Date(i, 0, 1),
})
const date = dayjs(pageDate.value)
const startOfYear = date.startOf('year')
const years: dayjs.Dayjs[] = []
for (let i = 0; i < 12; i++) {
years.push(dayjs(startOfYear).add(i, 'year'))
}
return years
})
@ -35,87 +33,45 @@ const currentYear = computed(() => {
})
const months = computed(() => {
const date = new Date(pageDate.value)
return [
{
label: 'January',
value: new Date(date.getFullYear(), 0, 1),
},
{
label: 'February',
value: new Date(date.getFullYear(), 1, 1),
},
{
label: 'March',
value: new Date(date.getFullYear(), 2, 1),
},
{
label: 'April',
value: new Date(date.getFullYear(), 3, 1),
},
{
label: 'May',
value: new Date(date.getFullYear(), 4, 1),
},
{
label: 'June',
value: new Date(date.getFullYear(), 5, 1),
},
{
label: 'July',
value: new Date(date.getFullYear(), 6, 1),
},
{
label: 'August',
value: new Date(date.getFullYear(), 7, 1),
},
{
label: 'September',
value: new Date(date.getFullYear(), 8, 1),
},
{
label: 'October',
value: new Date(date.getFullYear(), 9, 1),
},
{
label: 'November',
value: new Date(date.getFullYear(), 10, 1),
},
{
label: 'December',
value: new Date(date.getFullYear(), 11, 1),
},
]
const date = dayjs(pageDate.value)
const months: dayjs.Dayjs[] = []
for (let i = 0; i < 12; i++) {
months.push(date.add(i, 'month'))
}
return months
})
const compareDates = (date1: Date, date2: Date) => {
const compareDates = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
if (!date1 || !date2) return false
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth()
return date1.isSame(date2, 'month') && date1.isSame(date2, 'year')
}
const isMonthSelected = (date: Date) => {
const isMonthSelected = (date: dayjs.Dayjs) => {
if (!selectedDate.value) return false
return compareDates(date, selectedDate.value)
return compareDates(date, dayjs(selectedDate.value))
}
const paginateMonth = (action: 'next' | 'prev') => {
const date = new Date(pageDate.value)
const date = dayjs(pageDate.value)
if (action === 'next') {
date.setFullYear(date.getFullYear() + 1)
date.add(1, 'month')
} else {
date.setFullYear(date.getFullYear() - 1)
date.subtract(1, 'month')
}
pageDate.value = date
pageDate.value = date.toDate()
emit('update:pageDate', date.toDate())
}
const paginateYear = (action: 'next' | 'prev') => {
const date = new Date(pageDate.value)
let date = dayjs(pageDate.value)
if (action === 'next') {
date.setFullYear(date.getFullYear() + 12)
date = date.add(1, 'year').clone()
} else {
date.setFullYear(date.getFullYear() - 12)
date = date.subtract(1, 'year').clone()
}
pageDate.value = date
pageDate.value = date.toDate()
emit('update:pageDate', date.toDate())
}
const paginate = (action: 'next' | 'prev') => {
@ -126,9 +82,9 @@ const paginate = (action: 'next' | 'prev') => {
}
}
const compareYear = (date1: Date, date2: Date) => {
const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
if (!date1 || !date2) return false
return date1.getFullYear() === date2.getFullYear()
return date1.isSame(date2, 'year')
}
</script>
@ -147,28 +103,28 @@ const compareYear = (date1: Date, date2: Date) => {
<div class="grid grid-cols-4 gap-2 p-2">
<template v-if="!yearPicker">
<span
v-for="month in months"
:key="month.value"
v-for="(month, id) in months"
:key="id"
:class="{
'!bg-brand-50 !border-2 !border-brand-500': isMonthSelected(month.value),
'!bg-brand-50 !border-2 !border-brand-500': isMonthSelected(month),
}"
class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
@click="selectedDate = month.value"
@click="selectedDate = month.toDate()"
>
{{ month.label.slice(0, 3) }}
{{ month.format('MMM') }}
</span>
</template>
<template v-else>
<span
v-for="year in years"
:key="year"
v-for="(year, id) in years"
:key="id"
:class="{
'!bg-brand-50 !border-2 !border-brand-500': compareYear(year.value, selectedDate),
'!bg-brand-50 !border-2 !border-brand-500': compareYear(year, dayjs(selectedDate)),
}"
class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
@click="selectedDate = year.value"
@click="selectedDate = year.toDate()"
>
{{ year.label }}
{{ year.format('YYYY') }}
</span>
</template>
</div>

Write Preview
Loading…
Cancel
Save