handsontable/renderers/intlDateRenderer/intlDateRenderer.mjs

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

import { textRenderer } from "../textRenderer/index.mjs";
import { parseToLocalDate } from "../../helpers/dateTime.mjs";
import { isEmpty } from "../../helpers/mixed.mjs";
import { isObject } from "../../helpers/object.mjs";
import { BAD_VALUE_TEXT } from "../../helpers/constants.mjs";
export const RENDERER_TYPE = 'intl-date';
const DEFAULT_INTL_FORMAT = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};

/**
 * Formats the value using the date format.
 *
 * @param {*} value Value to be formatted.
 * @param {CellMeta} cellProperties Cell meta object.
 * @returns {*} Returns the rendered value.
 */
export function valueFormatter(value, cellProperties) {
  const {
    dateFormat,
    locale,
    allowEmpty
  } = cellProperties;
  if (isEmpty(value)) {
    return allowEmpty ? value : BAD_VALUE_TEXT;
  }
  const date = parseToLocalDate(value);
  if (date === null) {
    return BAD_VALUE_TEXT;
  }
  const intlFormat = isObject(dateFormat) ? dateFormat : DEFAULT_INTL_FORMAT;
  return new Intl.DateTimeFormat(locale, intlFormat).format(date);
}

/**
 * Handsontable renderer.
 *
 * @private
 * @param {Core} hotInstance The Handsontable instance.
 * @param {HTMLTableCellElement} TD The rendered cell element.
 * @param {number} row The visual row index.
 * @param {number} col The visual column index.
 * @param {number|string} prop The column property (passed when datasource is an array of objects).
 * @param {*} value The rendered value.
 * @param {object} cellProperties The cell meta object (see {@link Core#getCellMeta}).
 */
export function intlDateRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
  textRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
}
intlDateRenderer.valueFormatter = valueFormatter;
intlDateRenderer.RENDERER_TYPE = RENDERER_TYPE;