dateTime.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import moment from 'moment';
  2. import momentTimezone from 'moment-timezone';
  3. import ConfigStore from 'sentry/stores/configStore';
  4. interface Props extends React.HTMLAttributes<HTMLTimeElement> {
  5. date: moment.MomentInput | momentTimezone.MomentInput;
  6. dateOnly?: boolean;
  7. format?: string;
  8. seconds?: boolean;
  9. shortDate?: boolean;
  10. timeAndDate?: boolean;
  11. timeOnly?: boolean;
  12. utc?: boolean;
  13. }
  14. function DateTime({
  15. format,
  16. date,
  17. utc,
  18. shortDate,
  19. dateOnly,
  20. timeOnly,
  21. timeAndDate,
  22. seconds = true,
  23. ...props
  24. }: Props) {
  25. function getFormat({clock24Hours}: {clock24Hours: boolean}): string {
  26. if (format) {
  27. return format;
  28. }
  29. // October 26, 2017
  30. if (dateOnly) {
  31. return 'LL';
  32. }
  33. // Oct 26, 11:30 AM
  34. if (timeAndDate) {
  35. if (clock24Hours) {
  36. return 'MMM DD, HH:mm';
  37. }
  38. return 'MMM DD, LT';
  39. }
  40. // 4:57 PM
  41. if (timeOnly) {
  42. if (clock24Hours) {
  43. return 'HH:mm';
  44. }
  45. return 'LT';
  46. }
  47. if (shortDate) {
  48. return 'MM/DD/YYYY';
  49. }
  50. if (clock24Hours) {
  51. if (seconds) {
  52. // Oct 26, 2017 11:30:30
  53. return 'MMM D, YYYY HH:mm:ss';
  54. }
  55. // Oct 26, 2017 11:30
  56. return 'MMM D, YYYY HH:mm';
  57. }
  58. // Oct 26, 2017 11:30:30 AM
  59. if (seconds) {
  60. return 'll LTS z';
  61. }
  62. // Default is Oct 26, 2017 11:30 AM
  63. return 'lll';
  64. }
  65. const user = ConfigStore.get('user');
  66. const options = user?.options;
  67. const formatString = getFormat(options);
  68. return (
  69. <time {...props}>
  70. {utc
  71. ? moment.utc(date as moment.MomentInput).format(formatString)
  72. : momentTimezone.tz(date, options?.timezone ?? '').format(formatString)}
  73. </time>
  74. );
  75. }
  76. export default DateTime;