dify

dify/web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useDaysOfWeek } from '../hooks'
+
+export const DaysOfWeek = () => {
+  const daysOfWeek = useDaysOfWeek()
+
+  return (
+    <div className='grid grid-cols-7 gap-x-0.5 border-b-[0.5px] border-divider-regular p-2'>
+      {daysOfWeek.map(day => (
+        <div
+          key={day}
+          className='system-2xs-medium flex items-center justify-center text-text-tertiary'
+        >
+          {day}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(DaysOfWeek)

dify/web/app/components/base/date-and-time-picker/calendar/index.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import type { CalendarProps } from '../types'
+import { DaysOfWeek } from './days-of-week'
+import CalendarItem from './item'
+
+const Calendar: FC<CalendarProps> = ({
+  days,
+  selectedDate,
+  onDateClick,
+  wrapperClassName,
+  getIsDateDisabled,
+}) => {
+  return <div className={wrapperClassName}>
+    <DaysOfWeek />
+    <div className='grid grid-cols-7 gap-0.5 p-2'>
+      {
+        days.map(day => <CalendarItem
+          key={day.date.format('YYYY-MM-DD')}
+          day={day}
+          selectedDate={selectedDate}
+          onClick={onDateClick}
+          isDisabled={getIsDateDisabled ? getIsDateDisabled(day.date) : false}
+        />)
+      }
+    </div>
+  </div>
+}
+
+export default Calendar

dify/web/app/components/base/date-and-time-picker/calendar/item.tsx

@@ -0,0 +1,32 @@
+import React, { type FC } from 'react'
+import type { CalendarItemProps } from '../types'
+import cn from '@/utils/classnames'
+import dayjs from '../utils/dayjs'
+
+const Item: FC<CalendarItemProps> = ({
+  day,
+  selectedDate,
+  onClick,
+  isDisabled,
+}) => {
+  const { date, isCurrentMonth } = day
+  const isSelected = selectedDate?.isSame(date, 'date')
+  const isToday = date.isSame(dayjs(), 'date')
+
+  return (
+    <button type="button"
+      onClick={() => !isDisabled && onClick(date)}
+      className={cn(
+        'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
+        isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
+        isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
+        isDisabled && 'cursor-not-allowed text-text-quaternary hover:bg-transparent',
+      )}
+    >
+      {date.date()}
+      {isToday && <div className='absolute bottom-1 mx-auto h-1 w-1 rounded-full bg-components-button-primary-bg' />}
+    </button>
+  )
+}
+
+export default React.memo(Item)