dayjs#Dayjs TypeScript Examples

/**
 * Returns the dayjs object, corrected to central timezone
 *
 * @param millis UTC millisecond time
 * @returns The dayjs object in the correct timezone
 */
export function toTz(millis: number): Dayjs {
    return dayjs(Number(millis)).tz('America/Chicago');
}

export function formatDate(type: DateNavRange, dateValue: Dayjs, date: Dayjs) {
  if (!dateValue) {
    return null;
  }
  const label =
    type === DateNavRange.Decade
      ? dateValue.year()
      : type === DateNavRange.Year
      ? dateValue.month() + 1
      : dateValue.date();
  const cell = new DateCell(dateValue, label);
  if (type === DateNavRange.Month && date.month() !== dateValue.month()) {
    cell.isBackground = true;
  }
  return cell;
}

export function getTimeData(date: Dayjs): IDateData[] {
  const hour = date.hour()
  const base = date.subtract(hour < 12 ? hour : hour - 12, "hour")

  return new Array(12).fill(0).map(
    (v, idx): IDateData => ({
      text: `0${idx}`.slice(-2),
      current: idx === hour % 12,
      selected: idx === hour % 12,
      date: base.add(idx, "hour"),
    })
  )
}

//time: Dayjs;
    // text?: string;
    // moderator: RedditUser;
    // noteTypeIndex: number;
    // noteType: string | null;
    // link: string;

    constructor(public time: Dayjs, public text: string, public modIndex: number, public noteType: string | number, public link: (string | null) = null, public moderator?: RedditUser) {

    }

/**
 * It is taking from antd library.
 * The default header contains a month selector which is not needed for us.
 * TODO CalendarHeader could be removed after antd calendar will correct support `mode="month"`.
 */
export function CalendarHeader(props: CalendarHeaderProps) {
  const {onChange} = props;
  const divRef = React.useRef<HTMLDivElement>(null);
  const prefixCls = 'ant-picker-calendar';
  const fullscreen = true;

  const sharedProps = {
    ...props,
    prefixCls,
    generateConfig: dayjsGenerateConfig,
    onChange,
    fullscreen,
    divRef,
  };

  const [locale] = useLocaleReceiver("Calendar") as any

  return (
    <div className={`${prefixCls}-header`} ref={divRef}>
      <YearSelect<Dayjs> {...sharedProps} locale = {locale.lang} />
      <MonthSelect<Dayjs> {...sharedProps} locale = {locale.lang} />
    </div>
  );
}

AgeDisplay: React.FC<IProps> = ({ timestamp, className }) => {
  const parsedTime: Dayjs = dayjs(timestamp / 1000);

  return (
    <OverlayTrigger
      placement="top"
      overlay={
        <Tooltip id={"overlay-to"}>
          {parsedTime.format("YYYY-DD-MM HH:mm")}
        </Tooltip>
      }
    >
      <div className={className}>
        <span>{parsedTime.fromNow()}</span>
      </div>
    </OverlayTrigger>
  );
}

getDisabledTimeFn(
    selectedDate: Dayjs,
    type: keyof ReturnType<DisabledTimeFn>,
  ) {
    if (selectedDate !== this._cacheSelectedDate) {
      this._cacheDisabledTimeFn = this.disabledTime(selectedDate);
      this._cacheSelectedDate = selectedDate;
    }
    return this._cacheDisabledTimeFn?.[type];
  }

durationTimer = (
  duration: Duration,
  start: Dayjs = dayjs(),
  format: string = "DD[d:]HH[h:]mm[m]"
): string => {
  const end = start.add(duration);
  const result = dayjs.duration(end.diff(start));
  return result.format(format);
}

onSelectedChangeHandler(value: Dayjs) {
    let _stringValue = this.getDateStringValue(value, this.format);
    let _dateReturn = {
      value: _stringValue,
      date: value.isValid() ? value.toDate() : undefined,
      error: this.dxcInputRef.error,
    };
    this.onChange.emit(_dateReturn);
    if (!this.controlled) {
      this.dateValue = value;
      this.renderedValue = _stringValue;
    }

    this.onBlur.emit(_dateReturn);
    this.closeCalendar();
  }

export function lastMondayInCurrentMonth(date: Dayjs, monday: Dayjs): boolean {
  return monday.month() === date.month()
}

DateRangePicker: React.FC<RangePickerSharedProps<Dayjs>> = (props) => {
    return (
        <DatePicker.RangePicker
            css={RANGE_PICKER_CSS}
            allowClear={false}
            suffixIcon={<DownOutlined />}
            disabledDate={(date) => date > dayjs()}
            format='DD.MM.YYYY'
            separator={<MinusOutlined />}
            {...props}
        />
    )
}

AnnounceTimeItem: React.FC<{ tz: string; t: Dayjs }> = ({ tz, t }) => {
  return (
    <VStack spacing="0.6vw">
      <Text fontWeight="500" fontSize="1.6vw" lineHeight="1.8vw">
        {tz}
      </Text>
      <Text fontWeight="700" fontSize="3.2vw" lineHeight="3.8vw">
        {t.format("HH:mm")}
      </Text>
    </VStack>
  );
}

private getSingleSelectdState = (value: Dayjs): Partial<AtCalendarState> => {
    const { generateDate } = this.state;

    const stateValue: Partial<AtCalendarState> = {
      selectedDate: this.getSelectedDate(value.valueOf()),
    };

    const dayjsGenerateDate: Dayjs = value.startOf('month');
    const generateDateValue: number = dayjsGenerateDate.valueOf();

    if (generateDateValue !== generateDate) {
      this.triggerChangeDate(dayjsGenerateDate);
      stateValue.generateDate = generateDateValue;
    }

    return stateValue;
  };

/**
 * Get date or datetime ISO 8601
 *
 * Example: `2020-04-21` or `2020-04-30T09:11:17`
 *
 * Uses local time.
 *
 * @param includeTime Default is **false**
 */
export function getDateInISOFormat(date: Date | Dayjs = new Date(), includeTime = false): string {
	const format = includeTime ? DATE_TIME_FORMAT : DATE_FORMAT;
	return dayjs(date).format(format);
}

startedAt: Dayjs = dayjs();

CalendarDayjsAntd = generateCalendar<Dayjs>(dayjsGenerateConfig)

DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)

private loginAttempts: Dayjs[] = [];

override writeValue(obj: Dayjs) {
    super.writeValue(obj);
    this.selectedDate = obj;
    this.selectedTime = getTimePickerModel(obj);
    this.anchor = obj || dayjs();
    this.cdr.markForCheck();
  }