项目作者: ScholtenSeb

项目描述 :
chakra-ui & react-datepicker
高级语言: TypeScript
项目地址: git://github.com/ScholtenSeb/chakra-ui-react-datepicker.git
创建时间: 2021-04-23T03:45:10Z
项目社区:https://github.com/ScholtenSeb/chakra-ui-react-datepicker

开源协议:MIT License

下载


Chakra UI & React Datepicker WIP

Inspired by Javier Alaves. Watch him design here

Example

Dependencies

Usage

Copy and paste the following…

  1. import React, { FC, forwardRef, useCallback, useMemo } from 'react';
  2. import 'react-datepicker/dist/react-datepicker.css';
  3. import ReactDatePicker from 'react-datepicker';
  4. import {
  5. IconButton,
  6. Input,
  7. InputGroup,
  8. InputRightElement,
  9. Stack,
  10. StyleObjectOrFn,
  11. Text,
  12. useTheme,
  13. css as chakraCSS,
  14. } from '@chakra-ui/react';
  15. import {
  16. CalendarIcon,
  17. ChevronLeftIcon,
  18. ChevronRightIcon,
  19. } from '@chakra-ui/icons';
  20. import { ClassNames } from '@emotion/react';
  21. const CustomInput = forwardRef<any, any>((props, ref) => {
  22. return (
  23. <InputGroup>
  24. <Input {...props} ref={ref} />
  25. <InputRightElement
  26. userSelect="none"
  27. pointerEvents="none"
  28. children={<CalendarIcon ></CalendarIcon>}
  29. />
  30. </InputGroup>
  31. );
  32. });
  33. const CustomHeader = ({
  34. date,
  35. decreaseMonth,
  36. increaseMonth,
  37. prevMonthButtonDisabled,
  38. nextMonthButtonDisabled,
  39. }: any) => {
  40. return (
  41. <Stack pb={1} isInline alignItems="center" textAlign="left" pl={4} pr={2}>
  42. <Text color="gray.700" flex={1} fontSize="sm" fontWeight="medium">
  43. {new Intl.DateTimeFormat('en-AU', {
  44. year: 'numeric',
  45. month: 'long',
  46. }).format(date)}
  47. </Text>
  48. <IconButton
  49. borderRadius="full"
  50. size="sm"
  51. variant="ghost"
  52. aria-label="Previous Month"
  53. icon={<ChevronLeftIcon fontSize="14px" ></IconButton>}
  54. onClick={decreaseMonth}
  55. disabled={prevMonthButtonDisabled}
  56. />
  57. <IconButton
  58. borderRadius="full"
  59. size="sm"
  60. variant="ghost"
  61. aria-label="Next Month"
  62. icon={<ChevronRightIcon fontSize="14px" ></IconButton>}
  63. onClick={increaseMonth}
  64. disabled={nextMonthButtonDisabled}
  65. />
  66. </Stack>
  67. );
  68. };
  69. function useDatePickerStyles() {
  70. const theme = useTheme();
  71. return useMemo(() => {
  72. const defaultStyles: StyleObjectOrFn = {
  73. p: 2,
  74. bg: 'white',
  75. border: '1px solid',
  76. borderColor: 'gray.100',
  77. boxShadow: 'sm',
  78. '& .react-datepicker': {
  79. '&__header': {
  80. bg: 'none',
  81. borderBottom: 'none',
  82. },
  83. '&__month': {
  84. mt: 0,
  85. },
  86. '&__day-name': {
  87. color: 'gray.400',
  88. fontWeight: 'medium',
  89. w: 7,
  90. },
  91. '&__day': {
  92. lineHeight: '28px',
  93. color: 'gray.700',
  94. w: 7,
  95. h: 7,
  96. borderRadius: 'full',
  97. },
  98. '&__day:not(.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected):hover': {
  99. bg: 'white',
  100. boxShadow: '0 0 1px 1px rgba(0,0,0,0.2)',
  101. },
  102. '&__day--today': {
  103. bg: 'gray.100',
  104. fontWeight: '400',
  105. },
  106. '&__day--selected, &__day--keyboard-selected': {
  107. bg: 'gray.700',
  108. color: 'white',
  109. },
  110. },
  111. };
  112. return chakraCSS(defaultStyles)(theme);
  113. }, [theme]);
  114. }
  115. export interface DatePickerProps {
  116. value: Date;
  117. onChange: (date: Date | null) => void;
  118. }
  119. export const DatePicker: FC<DatePickerProps> = ({ value, onChange }) => {
  120. const styles = useDatePickerStyles();
  121. const render = useCallback(
  122. ({ css }) => {
  123. return (
  124. <ReactDatePicker
  125. dateFormat="dd MMMM, yyy"
  126. showPopperArrow={false}
  127. popperClassName={css({ marginTop: '4px!important' })}
  128. calendarClassName={css(styles)}
  129. selected={value}
  130. onChange={date =>
  131. Array.isArray(date) ? onChange(date[0]) : onChange(date)
  132. }
  133. customInput={<CustomInput ></CustomInput>}
  134. renderCustomHeader={CustomHeader}
  135. />
  136. );
  137. },
  138. [styles, value]
  139. );
  140. return <ClassNames>{render}</ClassNames>;
  141. };