date-fns/locale#zhCN TypeScript Examples

The following examples show how to use date-fns/locale#zhCN. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: i18n.ts    From vscode-crossnote with GNU Affero General Public License v3.0 6 votes vote down vote up 
export function languageCodeToDateFNSLocale(code: string) {
  if (code === "zh-CN") {
    return zhCN;
  } else if (code === "en-US") {
    return enUS;
  } else if (code === "zh-HK") {
    return zhTW;
  } else if (code === "ja-JP") {
    return ja;
  } else {
    return enUS;
  }
}
Example #2
Source File: Events.test.tsx    From react-calendar with MIT License 6 votes vote down vote up 
test('Renders event with locale', () => {
  render(
    <MonthlyCalendarTest
      locale={zhCN}
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  //check that the month nav date is in chinese
  screen.getByText('四月');

  //check the html inside the event day
  let eventDay = screen.getByLabelText('Events for day 4').textContent;
  expect(eventDay).toContain('Call bob');

  let eventItem = screen.getAllByText('Call bob');
  expect(eventItem.length).toEqual(1);
});
Example #3
Source File: Events.test.tsx    From react-calendar with MIT License 6 votes vote down vote up 
test('Renders using a custom locale', () => {
  render(
    <WeeklyCalendarTest
      locale={zhCN}
      week={new Date(testDate)}
      events={[
        { title: 'Janet smith', date: subDays(new Date(testDate), 2) },
        { title: 'Max Smith', date: subDays(new Date(testDate), 1) },
        { title: 'Code', date: subHours(new Date(testDate), 4) },
      ]}
    />
  );
  // check that all 3 are on screen
  screen.getByText('Janet smith');
  screen.getByText('Max Smith');
  screen.getByText('Code');

  screen.getByText('3月 1日 24:00');
});
Example #4
Source File: DateSelect.tsx    From UUI with MIT License 4 votes vote down vote up 
DateSelect = UUIFunctionComponent({
  name: 'DateSelect',
  nodes: {
    Root: 'div',
    Calendar: 'div',
    WeekGrid: 'div',
    WeekItem: 'div',
    DayGrid: 'div',
    DayItem: 'div',
  },
  propTypes: DateSelectPropTypes,
}, (props: DateSelectFeatureProps, { nodes, NodeDataProps }) => {
  const {
    Root, Calendar,
    WeekGrid, WeekItem,
    DayGrid, DayItem,
  } = nodes

  const betweenIncludeDates = useCallback((date: Date, range: [Date, Date] | Date[]) => {
    return !isBefore(date, range[0]) && !isAfter(date, range[1])
  }, [])

  const dateInfo = useMemo(() => {
    const firstDayInMonth = startOfMonth(props.yearMonth)
    const weekdayOfFirstDayInMonth = getDay(firstDayInMonth)

    const weekdays = range(0, 7).map((i) => {
      let date = new Date(props.yearMonth)
      date = startOfWeek(date)
      date = add(date, { days: i })
      return {
        key: format(date, 'yyyy-MM-dd'),
        date: date,
        label: format(date, 'EEEEEE', { locale: zhCN }),
      };
    });

    const days = range(
      1 - weekdayOfFirstDayInMonth,
      1 - weekdayOfFirstDayInMonth + 6*7,
    ).map((i) => {
      const date = add(firstDayInMonth, { days: i - 1 })
      const selected = props.selectedDates.findIndex((i) => isSameDay(date, i)) !== -1
      const inSelectedRange = (() => {
        if (props.selectedDates.length >= 2) {
          return betweenIncludeDates(date, props.selectedDates)
        }
        return false;
      })()
      return {
        key: format(date, 'yyyy-MM-dd'),
        date: date,
        label: getDate(date),
        active: isSameMonth(props.yearMonth, date),
        selected: selected,
        inSelectedRange: inSelectedRange,
      }
    })

    return {
      weekdays,
      days
    }
  }, [props.yearMonth, props.selectedDates, betweenIncludeDates])

  return (
    <Root>
      <Calendar>
        <WeekGrid>
          {dateInfo.weekdays.map((weekday) => {
            return (
              <WeekItem key={weekday.key}>
                {weekday.label}
              </WeekItem>
            );
          })}
        </WeekGrid>
        <DayGrid
          onMouseLeave={() => {
            props.onHoverDateChange && props.onHoverDateChange(undefined)
          }}
        >
          {dateInfo.days.map((day) => {
            const hovering = props.hoverDate ? isSameDay(day.date, props.hoverDate) : false
            const inHoverRange = (() => {
              if (props.selectedDates.length === 1 && props.hoverDate) {
                return betweenIncludeDates(day.date, [props.selectedDates[0], props.hoverDate].sort((i, j) => Number(i) - Number(j)))
              }
              return false
            })()
            return (
              <DayItem
                {...NodeDataProps({
                  'active': day.active,
                  'selected': day.selected,
                  'in-selected-range': day.inSelectedRange,
                  'in-hover-range': inHoverRange,
                  'hovering': hovering,
                })}
                key={day.key}
                onClick={() => {
                  props.onSelect(day.date)
                }}
                onMouseEnter={() => {
                  props.onHoverDateChange && props.onHoverDateChange(day.date)
                }}
                onMouseLeave={() => {
                  props.onHoverDateChange && props.onHoverDateChange(undefined)
                }}
              >
                {day.label}
              </DayItem>
            )
          })}
        </DayGrid>
      </Calendar>
    </Root>
  )
})