chakra dayzed datepicker

Dayzed를 기반으로 한 간단한 Chakra Datepicker입니다.

모든 개별 구성 요소는 Chakra UI를 사용하고 있습니다. 따라서 문제 없이 모든 차크라 UI 구성을 존중해야 합니다.

구성 요소 자체는 일부 date 라이브러리를 사용해야 합니다.

원하는 대로 사용자 정의하려면 /src 에서 소스 코드를 복사/붙여넣기하는 것이 좋습니다.

종속성 설치

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

방사:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

기본 사용법

하나의

  "chakra-dayzed-datepicker"에서 { SingleDatepicker }를 가져옵니다.

  const [date, setDate] = useState(new Date());

    

범위:

이 목록은 선택 프로세스 동안 하나의 값을 갖게 됩니다. selectedDates [intermediateSelection] 으로 설정하려고 시도하고 결과 selectedDates 의 길이가 날짜 선택기에 의미가 있기 때문에 이를 [startDate, endDate] 로 직접 제어하려고 하면 시스템이 작동하지 않습니다.

  "chakra-dayzed-datepicker"에서 { RangeDatepicker }를 가져옵니다.

    const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

    

소품 구성:

dateNavBtnProps Chakra-UI의 ButtonProps 에서 확장됩니다. 이를 통해 Chakra-UI에서 지원하는 한 원하는 대로 기본 동작을 재정의할 수 있습니다.

 dayOfMonthBtnProps = {
  defaultBtnProps,
  isInRangeBtnProp,
  selectedBtnProps,
  todayBtnProps}

dayOfMonthBtnProps 사용하면 주에 따라 날짜 btn 스타일을 사용자 정의할 수 있습니다.
스타일 우선순위: default < isInRange < seleted < today .

popoverCompProps 텍스트 색상과 같은 간단한 스타일을 전체적으로 설정하려는 경우 유용할 수 있습니다.

 popoverCompProps = {
  팝오버ContentProps,
  popoverBodyProps}

요약하자면:

  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, selectedBtnProps: {}, todayBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {}},calendarPanelProps: { WrapperProps: {}, contentProps: {}, headerProps: {}, DividerProps: {},},weekdayLabelProps: {},dateHeadingProps: {}
  }}

예:

  propsConfigs={{dateNavBtnProps: { colorScheme: "blue", 변형: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { background: 'blue.400',} }, isInRangeBtnProps: {color: "노란색", }, selectedBtnProps: {배경: "blue.200",color: "green", }, todayBtnProps: {배경: "teal.400", }},inputProps: { 크기: "sm"},popoverCompProps: { popoverContentProps: {배경: "gray.700 ",color: "흰색", },},calendarPanelProps: { WrapperProps: {borderColor: 'green', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', }, DividerProps: {display: "none", },},weekdayLabelProps: {fontWeight: 'normal'},dateHeadingProps: {fontWeight: 'semibold '}
  }}

구성:

비 차크라 관련 구성:

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

다른 소품:

이름	단일/범위	유형	기본값	설명
이름	둘 다	끈	한정되지 않은	요소의 이름 속성
사용포털	둘 다	부울	한정되지 않은	상위 스타일이 콘텐츠를 자르거나 숨기는 것을 방지하기 위해
defaultIsOpen	둘 다	부울	거짓	처음에 날짜 패널을 열어주세요
closeOnSelect	둘 다	부울	진실	선택이 완료되면 날짜 패널을 닫습니다.
최소 날짜	둘 다	날짜	한정되지 않은	최소 날짜
최대 날짜	둘 다	날짜	한정되지 않은	최대 날짜
비활성화된 날짜	하나의	세트	한정되지 않은	단일 날짜 선택기의 경우에만 startOfDay 비교로 사용합니다. 예: disabledDates={new Set([startOfDay(new Date()).getTime()}

< [email protected] 버전의 경우:
dayOfMonthBtnProps ButtonProps 에서 확장되며 selectedBg 만 지원합니다.

  dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
  },