date-fns#format JavaScript Examples

generateTime = (firstDay, today) => {
  return `
    <table
      width="100%"
      style="
        width: 100%;
        max-width: 100%:
        border-collapse: collapse;
        table-layout: fixed;
      "
    >
      <tbody>
        <tr>
          <td>${format(firstDay, "EEEE d MMMM", { locale: fr })}</td>
          <td align="right" style="text-align: right;">
              ${format(today, "EEEE d MMMM", { locale: fr })}
          </td>
        </tr>
      </tbody>
    </table>
  `;
}

formatUtcToTimeZone = (dateString, formatString) =>
  format(
    utcToZonedTime(
      parseISO(dateString),
      Intl.DateTimeFormat().resolvedOptions().timeZone
    ),
    formatString,
    {
      locale: getLocale(),
    }
  )

initialState = {
  date: format(new Date(Date.now()), "yyyy-MM-dd"),
  seats: "",
  time: "",
  name: null,
  phone: null,
  email: null,
  notes: null,

  booking: null,
  error: null,
  loading: false,
  bookingCode: "",
  currentRestaurantID: 0,
  restaurantBookings: [],
  restaurantHours: [],
  availableRestaurantHours: [],
  tableCapacity: [],
}

formatDateDistance = (endDate) => {
  const format = formatDistanceStrict(new Date(), new Date(endDate));
  const duration = format.split(' ');
  duration[1] = duration[1].substring(0, 1);
  if (duration[1] === 's') {
    return 'Just now';
  }
  return duration.join(' ');
}

formatRelativeDate = (date) => {
  const isoDate = parseISO(date);
  if (isToday(isoDate)) {
    return "aujourd'hui";
  } else if (isYesterday(isoDate)) {
    return "hier";
  } else {
    return format(isoDate, "EEEE d MMMM", { locale: fr });
  }
}

IndiaMapInfo = ({ date, mapInfo, showInstruction }) => {
  const { t } = useTranslation();
  return (
    <div className="india-map-info">
      <div className="state-name">
        {/* TODO: Remove this hack and just name total key as India */}
        {mapInfo.name === 'Total' ? 'India' : mapInfo.name}
      </div>
      {mapInfo.zone && (
      <div className={`india-map-zone ${zoneClassMap[mapInfo.zone]}`}>
        {zoneClassMap[mapInfo.zone]}
      </div>
      )}
      <div className="india-map-date">
        {format(new Date(date), 'd MMMM yyyy')}
      </div>
      {showInstruction && (
      <div className="instruction">
        {t('Click outside map to see country stats')}
      </div>
      )}
    </div>
  );
}

export default function SidebarNote({note}) {
  const updatedAt = new Date(note.updated_at);
  const lastUpdatedAt = isToday(updatedAt)
    ? format(updatedAt, 'h:mm bb')
    : format(updatedAt, 'M/d/yy');
  const summary = excerpts(marked(note.body), {words: 20});
  return (
    <ClientSidebarNote
      id={note.id}
      title={note.title}
      expandedChildren={
        <p className="sidebar-note-excerpt">{summary || <i>(No content)</i>}</p>
      }
    >
      <header className="sidebar-note-header">
        <strong>{note.title}</strong>
        <small>{lastUpdatedAt}</small>
      </header>
    </ClientSidebarNote>
  );
}

formatDate = (unformattedDate, formatString) => {
  if (!unformattedDate) return '';
  if (
    typeof unformattedDate === 'string' &&
    unformattedDate.match(ISO_DATE_REGEX)
  )
    unformattedDate += INDIA_ISO_SUFFIX;
  const date = utcToZonedTime(new Date(unformattedDate), 'Asia/Kolkata');
  return format(date, formatString, {
    locale: locale,
  });
}

abbreviateNumber = (number) => {
  if (Math.abs(number) < 1e3) return numberFormatter.format(number);
  else if (Math.abs(number) >= 1e3 && Math.abs(number) < 1e5)
    return numberFormatter.format(number / 1e3) + "K";
  else if (Math.abs(number) >= 1e5 && Math.abs(number) < 1e7)
    return numberFormatter.format(number / 1e5) + "L";
  else if (Math.abs(number) >= 1e7 && Math.abs(number) < 1e10)
    return numberFormatter.format(number / 1e7) + "Cr";
  else if (Math.abs(number) >= 1e10 && Math.abs(number) < 1e14)
    return numberFormatter.format(number / 1e10) + "K Cr";
  else if (Math.abs(number) >= 1e14)
    return numberFormatter.format(number / 1e14) + "L Cr";
}

render() {
    return (
      <div className="blog-roll-section">
        <TitleWithAnchor  className="common-title-container" headerClassName="common-title" children={this.title} />
        {this.state.posts.length === 0 && (
          <div className="blog-roll-loading">Loading...</div>
        )}
        {this.state.posts.length > 0 && (
          <ul>
            {this.state.posts.map((post) => {
              return (
                <li key={post.link}>
                  <a
                    href={post.link}
                    className="blog-roll-item"
                    target="_blank"
                  >
                    <span className="blog-roll-date">
                      {format(post.pubDate, "MMM d, yyyy")}
                    </span>{" "}
                    <span className="blog-roll-title">
                      <u>{unescape(post.title)}</u>{" "}
                      <span className="blog-roll-author">{post.author}</span>
                    </span>
                  </a>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    );
  }

Clock = () => {
  const { clockTime } = useContext(AppContext);
  const [date, setDate] = useState(new Date().getTime());

  useEffect(() => {
    const clockInterval = setInterval(() => {
      setDate(new Date().getTime());
    }, 1000);
    return () => {
      clearInterval(clockInterval);
    };
  }, []);

  return (
    <div>
      <div className={styles.date}>
        {format(date, "cccc").toUpperCase()}{" "}
        {format(date, "LLLL").toUpperCase()} {format(date, "d")}
      </div>
      <div className={styles.time}>{format(date, clockTime === "12" ? "p" : "HH:mm")}</div>
      <div className={styles.sunRiseSetContainer}>
        <SunRiseSet/>
      </div>
    </div>
  );
}

ageRange(grave) {
    const monthOpen = format(parseISO(grave.dateClose), 'LLLL');
    const yearOpen = format(parseISO(grave.dateOpen), 'uuuu');
    const yearClose = format(parseISO(grave.dateClose), 'uuuu');
    if (!this.isPast()) {
      const date = parseISO(grave.dateClose);
      return (
        <AgeRange>
          <time dateTime={format(date, 'uuuu-LL-dd')}>
            {monthOpen}
            <br />
            {format(date, 'uuuu')}
          </time>
        </AgeRange>
      );
    }
    return (
      <AgeRange>
        <time dateTime={format(parseISO(grave.dateOpen), 'uuuu-LL-dd')}>
          {yearOpen}
        </time>
        {' - '}
        <time dateTime={format(parseISO(grave.dateClose), 'uuuu-LL-dd')}>
          {yearClose}
        </time>
      </AgeRange>
    );
  }

DateTimeCell = (column) => {
  const date = new Date(column.value);
  const dateFormat = "MMM dd yyyy, HH:mm:ss";

  return column.value ? (
    <div style={{ whiteSpace: "nowrap" }}>
      {isValid(date) ? format(date, dateFormat) : ""}
    </div>
  ) : (
    ""
  );
}

export default function CalendarNavigation({ locale, month, minimumDate, maximumDate, onMonthChange }) {
  const handlePrevious = event => {
    onMonthChange(startOfMonth(subMonths(month, 1)))
    event.preventDefault()
  }

  const handleNext = event => {
    onMonthChange(startOfMonth(addMonths(month, 1)))
    event.preventDefault()
  }

  return (
    <div className='nice-dates-navigation'>
      <a
        className={classNames('nice-dates-navigation_previous', {
          '-disabled': isSameMonth(month, minimumDate)
        })}
        onClick={handlePrevious}
        onTouchEnd={handlePrevious}
      />

      <span className='nice-dates-navigation_current'>
        {format(month, getYear(month) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy', { locale })}
      </span>

      <a
        className={classNames('nice-dates-navigation_next', {
          '-disabled': isSameMonth(month, maximumDate)
        })}
        onClick={handleNext}
        onTouchEnd={handleNext}
      />
    </div>
  )
}

/**
 * Log grouped messages to the console
 * @param {string} type
 * @param {string} title
 * @param {*} data
 * @param {Object} [options]
 */
export function logger(type: string, title: string, data: any, options: Object = {}) {
  /* istanbul ignore else */
  if (process.env.NODE_ENV === 'development') {
    /* eslint-disable no-console */
    const { collapsed = true, hideTimestamp = false, typeColor = 'gray' } = options;
    const groupMethod = collapsed ? console.groupCollapsed : console.group;
    const parts = [`%c ${type}`];
    const styles = [`color: ${typeColor}; font-weight: lighter;`, 'color: inherit;'];

    if (!hideTimestamp) {
      styles.push('color: gray; font-weight: lighter;');
    }

    const time = format(new Date(), 'HH:mm:ss');

    parts.push(`%c${title}`);

    if (!hideTimestamp) {
      parts.push(`%c@ ${time}`);
    }

    /* istanbul ignore else */
    if (!window.SKIP_LOGGER) {
      groupMethod(parts.join(' '), ...styles);
      console.log(data);
      console.groupEnd();
    }
    /* eslint-enable */
  }
}

render() {  
        return (
            <div className="noteBox px-3 py-3 mt-3" id="claimForm">
              <h3 className="headline">Claim {format(this.props.selectedDate, "LLL do yyyy")}</h3>
              <p>This historical date hasn't been claimed yet. If you want to mint it as NFT, now is your time.</p>
              <p>As an owner of this date you can set its title which is shown next to it here and on Opensea.</p>
              <form onSubmit={(event) => {
                event.preventDefault()
                this.props.onSubmit()
                claimDate(this.props.selectedDate, this.state.note)
                  .on("error", async (error, receipt) => {
                    console.log("error")
                    await this.props.onError()
                  })
                  .on("receipt", async () => {                     
                    await this.props.onDone()
                   })  
              }}>
              <label className="mr-3">Note: </label>
              <input 
                type="text"
                onChange={e => this.setState({ note: e.target.value })}
              />
              <p><i>(Claiming a DATE TOKEN costs 0.01 ETH + gas costs)</i></p>
              <button 
                type="submit"
                disabled={this.state.note.length === 0}
              >
                  CLAIM DATE
              </button>
              </form>
            </div>
            
          )
    }

TimeRange.defaultProps = {
  selectedInterval: [
    set(new Date(), { minutes: 0, seconds: 0, milliseconds: 0 }),
    set(addHours(new Date(), 1), { minutes: 0, seconds: 0, milliseconds: 0 })
  ],
  timelineInterval: [startOfToday(), endOfToday()],
  formatTick: ms => format(new Date(ms), 'HH:mm'),
  disabledIntervals: [],
  step: 1000*60*30,
  ticksNumber: 48,
  error: false,
  mode: 3,
}

isBan (data) {
    let date = new Date()
    let currDate = format(date.setHours(date.getHours()), 'YYYY-MM-DD HH:mm:ss')
    if (new Date(currDate).getTime() > new Date(data).getTime()) {
      return false
    } else {
      return true
    }
  }

/**
 * Format a timestamp as a string
 * @param {Date} date
 *
 * @return {string}
 */
export function formatTimestamp(date) {
  return format(date, 'MMM dd, yyyy HH:MM:SS a');
}

i18nextConfiguration = {
  supportedLngs: supportedLanguages,
  fallbackLng: supportedLanguages[0],
  resources,
  ns: namespaces,
  defaultNS: namespaces[0],
  interpolation: {
    escapeValue: false,
    format: (value, format, language) => {
      if (value instanceof Date) {
        return formatDate(value, format, language)
      }
      return value.toString()
    }
  }
}

Listlive = ({ lives }) => {
  return (
    <div>
      {
        lives.map((live, index) => (
          <div className="card" key={index}>
            <div className="uuid-live" data-label="UUID">{live.id}</div>
            <div className="title-live" data-label="TITLE">{live.title}</div>
            <div className="date-live" data-label="DATE" >{ format(parseISO(live.created_at), 'dd/MM/yyyy HH:mm')}</div>
            <div className="create-link-live effect-in" data-label="CREATE LIVE"> <a target="_blank" rel="noopener noreferrer" href={`http://localhost:4000/broadcaster/${live.slug}`}>create live</a> </div>
            <div className="invite-live effect-in" data-label="INVITE"> <a target="_blank" rel="noopener noreferrer" href={`http://localhost:4000/viewer/${live.slug}`}>invite</a> </div>
            <div className="status-live" data-label="STATUS">
              <div className="circle-status-live" style={{ backgroundColor: live.status === 'pending' ? 'rgb(255, 208, 86)' : 'red' }}></div>
            </div>
          </div>
          )
        )
      }
    </div>
  )
}

formatLabel = (date, intervalInDays) => {
  if (date) {
    if (intervalInDays < 365) {
      return format(date, 'MM/dd/yy');
    }
    return format(date, 'yyyy/MM');
  }
  return '';
}

function mapData(data) {
  let last = 0;
  const arr = [];

  data.reduce((obj, val) => {
    const { created_at } = val;
    const t = startOfMinute(parseISO(created_at));
    if (t.getTime() > last) {
      obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
      arr.push(obj);
      last = t;
    } else {
      obj.y += 1;
    }
    return obj;
  }, {});

  return arr;
}

export default function ConversationTime(date) {
    // Check if it is a valid date
    if (date === 'Invalid Date') return '';

    if (isToday(date)) {
        return format(date, 'hh:mm a');
    }

    if (isYesterday(date)) {
        return 'Yesterday';
    }

    return format(date, 'dd/MM/yy');
}

formatDate = (d) => {
  if (isToday(d)) {
    return format(d, 'p');
  }
  if (isTomorrow(d)) {
    return `tomorrow at ${format(d, 'p')}`;
  }
  return format(d, 'PPPp');
}

Timestamp = ({ time }) => {
  return time ? (
    <Tooltip title={format(new Date(time), 'dd.MM.yyyy')}>
      <DateTitle>
        {formatDistance(new Date(time), new Date(), {
          addSuffix: true,
        })}
      </DateTitle>
    </Tooltip>
  ) : null
}

formatDate = (dateString) =>
  format(parseISO(dateString.split('T')[0]), 'P', {
    locale: getLocale(),
  })

function MapMarker({ request, clusterer, position }) {
  const [marker, setMarker] = useState(null);
  const [showInfoWindow, setShowInfoWindow] = useState(false);

  const handleOnLoad = (mapMarker) => {
    setMarker(mapMarker);
  };

  const handleOnClick = () => {
    setShowInfoWindow(!showInfoWindow);
  };

  const renderInfoWindow = (mapMarker) => {
    if (mapMarker === null || request === null || !showInfoWindow) return null;

    // TODO: Remove this once the model has stabilized.
    if (!request || !request.d) return null;

    return (
      <InfoWindow anchor={mapMarker}>
        <div>
          <Typography variant="subtitle2">
            {request.d.firstName} &ndash; {request.d.generalLocationName}
          </Typography>
          <Typography variant="body2">
            {format(request.d.createdAt.toDate(), 'p - PPPP')}
          </Typography>
          <Typography variant="body2">
            Immediacy:{' '}
            {immediacyMap[request.d.immediacy] &&
              immediacyMap[request.d.immediacy].shortDescription}
          </Typography>
          <Typography variant="body2">
            Needs:{' '}
            {request.d.needs.map((key) => allCategoryMap[key].shortDescription)}
          </Typography>
          <Typography variant="subtitle2">
            <Link to={generatePath(REQUEST_PATH, { requestId: request.id })}>
              Details...
            </Link>
          </Typography>
        </div>
      </InfoWindow>
    );
  };

  return (
    <Marker
      clusterer={clusterer}
      position={position}
      onClick={handleOnClick}
      onLoad={handleOnLoad}>
      {renderInfoWindow(marker)}
    </Marker>
  );
}

// ----------------------------------------------------------------------

export function fDate(date) {
  return format(new Date(date), 'dd MMMM yyyy');
}