All files / app/components DateTime.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30                    10x               10x 13x         13x 13x     10x  
import React from 'react';
import { style } from 'app/styles';
 
export interface DateTimeProps {
  value: Date;
  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
  displayOptions?: object;
  style?: object;
}
 
const defaultDisplayOptions = {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
};
 
// numbers for humans have commas
export const DateTime = (props: DateTimeProps): JSX.Element => {
  const displayOptions = Object.assign(
    {},
    defaultDisplayOptions,
    props.displayOptions
  );
  const humanDateTime = props.value.toLocaleString('en-US', displayOptions);
  return <span style={style(props.style)}>{humanDateTime}</span>;
};
 
DateTime.displayName = 'DateTime';