@pdfme/schemas 5.2.11-dev.6 → 5.2.12-dev.0

package/src/date/date.ts

@@ -1,54 +1,9 @@
-import { Lang } from '@pdfme/common';
 import { getPlugin } from './helper';
 import { createSvgStr } from '../utils.js';
 import { Calendar } from 'lucide';
 
 const type = 'date';
 
-const defaultFormat = 'yyyy/MM/dd';
-
-const formatsByLang: Record<Lang, string[]> = {
-  en: [
-    defaultFormat,
-    'MM/dd/yyyy',
-    'MMMM d, yyyy',
-    'MMM d, yyyy',
-    'EEEE, MMMM d, yyyy',
-    'yyyy-MM-dd',
-  ],
-  zh: [defaultFormat, 'yyyy年MM月dd日', 'MM月dd日', 'M月d日', 'yyyy-MM-dd'],
-  ja: [defaultFormat, 'yyyy年MM月dd日', 'MM月dd日', 'M月d日', 'yyyy-MM-dd'],
-  ko: [defaultFormat, 'yyyy년 MM월 dd일', 'MM월 dd일', 'M월 d일', 'yyyy-MM-dd'],
-  ar: [defaultFormat, 'dd/MM/yyyy', 'd MMMM yyyy', 'd MMM yyyy', 'EEEE، d MMMM yyyy', 'yyyy-MM-dd'],
-  th: [
-    defaultFormat,
-    'dd/MM/yyyy',
-    'd MMMM yyyy',
-    'd MMM yyyy',
-    'EEEEที่ d MMMM G yyyy',
-    'yyyy-MM-dd',
-  ],
-  pl: [defaultFormat, 'dd.MM.yyyy', 'd MMMM yyyy', 'd MMM yyyy', 'EEEE, d MMMM yyyy', 'yyyy-MM-dd'],
-  it: [defaultFormat, 'dd/MM/yyyy', 'd MMMM yyyy', 'd MMM yyyy', 'EEEE d MMMM yyyy', 'yyyy-MM-dd'],
-  de: [
-    defaultFormat,
-    'dd.MM.yyyy',
-    'd. MMMM yyyy',
-    'd. MMM yyyy',
-    'EEEE, d. MMMM yyyy',
-    'yyyy-MM-dd',
-  ],
-  es: [
-    defaultFormat,
-    'dd/MM/yyyy',
-    'd de MMMM de yyyy',
-    'd de MMM de yyyy',
-    'EEEE, d de MMMM de yyyy',
-    'yyyy-MM-dd',
-  ],
-  fr: [defaultFormat, 'dd/MM/yyyy', 'd MMMM yyyy', 'd MMM yyyy', 'EEEE d MMMM yyyy', 'yyyy-MM-dd'],
-};
-
 const icon = createSvgStr(Calendar);
 
-export default getPlugin({ type, defaultFormat, icon, formatsByLang });
+export default getPlugin({ type, icon });

package/src/date/dateTime.ts

@@ -1,101 +1,9 @@
-import { Lang } from '@pdfme/common';
 import { getPlugin } from './helper';
 import { createSvgStr } from '../utils.js';
 import { CalendarClock } from 'lucide';
 
 const type = 'dateTime';
 
-const defaultFormat = 'yyyy/MM/dd HH:mm';
-
-const formatsByLang: Record<Lang, string[]> = {
-  en: [
-    defaultFormat,
-    'MM/dd/yyyy h:mm a',
-    'MMMM d, yyyy h:mm a',
-    'MMM d, yyyy h:mm a',
-    'EEEE, MMMM d, yyyy h:mm a',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  zh: [
-    defaultFormat,
-    'yyyy年MM月dd日 HH:mm',
-    'MM月dd日 HH:mm',
-    'M月d日 HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  ja: [
-    defaultFormat,
-    'yyyy年MM月dd日 HH:mm',
-    'MM月dd日 HH:mm',
-    'M月d日 HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  ko: [
-    defaultFormat,
-    'yyyy-MM-dd HH:mm',
-    'yyyy년 MM월 dd일 HH:mm',
-    'MM월 dd일 HH:mm',
-    'M월 d일 HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  ar: [
-    defaultFormat,
-    'dd/MM/yyyy h:mm a',
-    'd MMMM yyyy h:mm a',
-    'd MMM yyyy h:mm a',
-    'EEEE، d MMMM yyyy h:mm a',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  th: [
-    defaultFormat,
-    'dd/MM/yyyy HH:mm',
-    'd MMMM yyyy HH:mm',
-    'd MMM yyyy HH:mm',
-    'EEEEที่ d MMMM G yyyy HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  pl: [
-    defaultFormat,
-    'dd.MM.yyyy HH:mm',
-    'd MMMM yyyy HH:mm',
-    'd MMM yyyy HH:mm',
-    'EEEE, d MMMM yyyy HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  it: [
-    defaultFormat,
-    'dd/MM/yyyy HH:mm',
-    'd MMMM yyyy HH:mm',
-    'd MMM yyyy HH:mm',
-    'EEEE d MMMM yyyy HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  de: [
-    defaultFormat,
-    'dd.MM.yyyy HH:mm',
-    'd. MMMM yyyy HH:mm',
-    'd. MMM yyyy HH:mm',
-    'EEEE, d. MMMM yyyy HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  es: [
-    defaultFormat,
-    'dd/MM/yyyy h:mm a',
-    'd de MMMM de yyyy h:mm a',
-    'd de MMM de yyyy h:mm a',
-    'EEEE, d de MMMM de yyyy h:mm a',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-  fr: [
-    defaultFormat,
-    'dd/MM/yyyy HH:mm',
-    'd MMMM yyyy HH:mm',
-    'd MMM yyyy HH:mm',
-    'EEEE d MMMM yyyy HH:mm',
-    "yyyy-MM-dd'T'HH:mm:ss",
-  ],
-};
-
 const icon = createSvgStr(CalendarClock);
 
-export default getPlugin({ type, defaultFormat, icon, formatsByLang });
+export default getPlugin({ type, icon });

package/src/date/helper.ts

@@ -1,28 +1,48 @@
 import type * as CSS from 'csstype';
-import AirDatepicker, { AirDatepickerLocale } from 'air-datepicker';
+
+import AirDatepicker from 'air-datepicker';
+import type { AirDatepickerLocale } from 'air-datepicker';
+import localeAr from 'air-datepicker/locale/ar';
+import localeBg from 'air-datepicker/locale/bg';
+import localeCa from 'air-datepicker/locale/ca';
+import localeCs from 'air-datepicker/locale/cs';
+import localeDa from 'air-datepicker/locale/da';
+import localeDe from 'air-datepicker/locale/de';
+import localeEl from 'air-datepicker/locale/el';
 import localeEn from 'air-datepicker/locale/en';
-import localeZh from 'air-datepicker/locale/zh';
+import localeEs from 'air-datepicker/locale/es';
+import localeEu from 'air-datepicker/locale/eu';
+import localeFi from 'air-datepicker/locale/fi';
+import localeFr from 'air-datepicker/locale/fr';
+import localeHr from 'air-datepicker/locale/hr';
+import localeHu from 'air-datepicker/locale/hu';
+import localeId from 'air-datepicker/locale/id';
+import localeIt from 'air-datepicker/locale/it';
 import localeJa from 'air-datepicker/locale/ja';
 import localeKo from 'air-datepicker/locale/ko';
-import localeAr from 'air-datepicker/locale/ar';
+import localeNb from 'air-datepicker/locale/nb';
+import localeNl from 'air-datepicker/locale/nl';
 import localeTh from 'air-datepicker/locale/th';
 import localePl from 'air-datepicker/locale/pl';
-import localeIt from 'air-datepicker/locale/it';
-import localeDe from 'air-datepicker/locale/de';
-import localeEs from 'air-datepicker/locale/es';
-import localeFr from 'air-datepicker/locale/fr';
+import localePtBR from 'air-datepicker/locale/pt-BR';
+import localePt from 'air-datepicker/locale/pt';
+import localeRo from 'air-datepicker/locale/ro';
+import localeRu from 'air-datepicker/locale/ru';
+import localeSi from 'air-datepicker/locale/si';
+import localeSk from 'air-datepicker/locale/sk';
+import localeSl from 'air-datepicker/locale/sl';
+import localeSv from 'air-datepicker/locale/sv';
+import localeTr from 'air-datepicker/locale/tr';
+import localeUk from 'air-datepicker/locale/uk';
+import localeZh from 'air-datepicker/locale/zh';
+
+import * as dateFns from 'date-fns/locale';
 import { format } from 'date-fns';
-import { enUS, zhCN, ja, ko, ar, th, pl, it, de, es, fr, Locale } from 'date-fns/locale';
-import {
-  Lang,
-  Plugin,
-  getFallbackFontName,
-  DEFAULT_FONT_NAME,
-  PropPanelSchema,
-} from '@pdfme/common';
+
+import { Plugin, getFallbackFontName, DEFAULT_FONT_NAME, PropPanelSchema } from '@pdfme/common';
 import text from '../text';
 import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
-import { mapVerticalAlignToFlex, getBackgroundColor } from '../text/uiRender';
+import { mapVerticalAlignToFlex } from '../text/uiRender';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
@@ -35,6 +55,77 @@ import { DateSchema } from './types';
 import { getExtraFormatterSchema, Formatter } from '../text/extraFormatter';
 import { isEditable } from '../utils';
 
+type PickerType = 'date' | 'time' | 'dateTime';
+
+interface Locale {
+  label: string;
+  adLocale: AirDatepickerLocale;
+  close: string;
+  formatLocale: dateFns.Locale;
+}
+
+const LOCALE_MAP: Record<
+  string,
+  {
+    label: string;
+    adLocale: AirDatepickerLocale;
+    close: string;
+    formatLocale: dateFns.Locale;
+  }
+> = {
+  ar: { label: 'Arabic', adLocale: localeAr, close: 'يغلق', formatLocale: dateFns.ar },
+  bg: { label: 'Bulgarian', adLocale: localeBg, close: 'близо', formatLocale: dateFns.bg },
+  ca: { label: 'Catalan', adLocale: localeCa, close: 'Fermer', formatLocale: dateFns.ca },
+  cs: { label: 'Czech', adLocale: localeCs, close: 'Blízko', formatLocale: dateFns.cs },
+  da: { label: 'Danish', adLocale: localeDa, close: 'Tæt', formatLocale: dateFns.da },
+  de: { label: 'German', adLocale: localeDe, close: 'Schließen', formatLocale: dateFns.de },
+  el: { label: 'Greek', adLocale: localeEl, close: 'κοντά', formatLocale: dateFns.el },
+  en: { label: 'English', adLocale: localeEn, close: 'Close', formatLocale: dateFns.enUS },
+  es: { label: 'Spanish', adLocale: localeEs, close: 'Cerca', formatLocale: dateFns.es },
+  eu: { label: 'Basque', adLocale: localeEu, close: 'Itxi', formatLocale: dateFns.eu },
+  fi: { label: 'Finnish', adLocale: localeFi, close: 'Lähellä', formatLocale: dateFns.fi },
+  fr: { label: 'French', adLocale: localeFr, close: 'Fermer', formatLocale: dateFns.fr },
+  hr: { label: 'Croatian', adLocale: localeHr, close: 'Zatvoriti', formatLocale: dateFns.hr },
+  hu: { label: 'Hungarian', adLocale: localeHu, close: 'Közeli', formatLocale: dateFns.hu },
+  id: { label: 'Indonesian', adLocale: localeId, close: 'Menutup', formatLocale: dateFns.id },
+  it: { label: 'Italian', adLocale: localeIt, close: 'Vicino', formatLocale: dateFns.it },
+  ja: { label: 'Japanese', adLocale: localeJa, close: '閉じる', formatLocale: dateFns.ja },
+  ko: { label: 'Korean', adLocale: localeKo, close: '닫다', formatLocale: dateFns.ko },
+  nb: { label: 'Norwegian Bokmål', adLocale: localeNb, close: 'Lukke', formatLocale: dateFns.nb },
+  nl: { label: 'Dutch', adLocale: localeNl, close: 'Dichtbij', formatLocale: dateFns.nl },
+  pl: { label: 'Polish', adLocale: localePl, close: 'Zamknąć', formatLocale: dateFns.pl },
+  'pt-Br': {
+    label: 'Portuguese',
+    adLocale: localePtBR,
+    close: 'Fechar',
+    formatLocale: dateFns.ptBR,
+  },
+  pt: { label: 'Portuguese', adLocale: localePt, close: 'Fechar', formatLocale: dateFns.pt },
+  ro: { label: 'Romanian', adLocale: localeRo, close: 'Aproape', formatLocale: dateFns.ro },
+  ru: { label: 'Russian', adLocale: localeRu, close: 'закрывать', formatLocale: dateFns.ru },
+  si: {
+    label: 'Sinhala',
+    adLocale: localeSi,
+    close: 'සමීපයි',
+    formatLocale: dateFns.enUS,
+  },
+  sk: { label: 'Slovak', adLocale: localeSk, close: 'Zavrieť', formatLocale: dateFns.sk },
+  sl: { label: 'Slovenian', adLocale: localeSl, close: 'Blizu', formatLocale: dateFns.sl },
+  sv: { label: 'Swedish', adLocale: localeSv, close: 'Nära', formatLocale: dateFns.sv },
+  th: { label: 'Thai', adLocale: localeTh, close: 'ปิด', formatLocale: dateFns.th },
+  tr: { label: 'Turkish', adLocale: localeTr, close: 'kapalı', formatLocale: dateFns.tr },
+  uk: { label: 'Ukrainian', adLocale: localeUk, close: 'Закрити', formatLocale: dateFns.uk },
+  zh: { label: 'Chinese', adLocale: localeZh, close: '关闭', formatLocale: dateFns.zhCN },
+};
+
+const getAirDatepickerLocale = (locale: string) => {
+  const data = LOCALE_MAP[locale];
+  if (!data) {
+    throw new Error(`Unsupported locale: ${locale}`);
+  }
+  return data;
+};
+
 const airDatepickerCss = `.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover,.air-datepicker-cell.-in-range-.-focus-{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}
 .air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}
 .air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}
@@ -56,25 +147,11 @@ const injectStyles = (css: string) => {
   }
 };
 
-const getDateFnsLocale = (lang: Lang): Locale | undefined =>
-  ({ en: enUS, zh: zhCN, ja, ko, ar, th, pl, it, de, es, fr }[lang]);
-
-const getAirDatepickerLocale = (lang: Lang): AirDatepickerLocale | undefined =>
-  ({
-    en: localeEn,
-    zh: localeZh,
-    ja: localeJa,
-    ko: localeKo,
-    ar: localeAr,
-    th: localeTh,
-    pl: localePl,
-    it: localeIt,
-    de: localeDe,
-    es: localeEs,
-    fr: localeFr,
-  }[lang]);
-
-const strDateToDate = (strDate: string, type: 'date' | 'time' | 'dateTime'): Date => {
+const strDateToDate = (strDate: string, type: PickerType): Date => {
+  if (!strDate.trim()) {
+    return new Date();
+  }
+
   if (type === 'time') {
     const dateTimePattern = /^\d{4}\/\d{2}\/\d{2} \d{2}:\d{2}$/;
     if (dateTimePattern.test(strDate)) {
@@ -82,74 +159,111 @@ const strDateToDate = (strDate: string, type: 'date' | 'time' | 'dateTime'): Dat
     }
     return new Date(`2021-01-01T${strDate}`);
   }
+
   return new Date(strDate);
 };
 
-export const getPlugin = ({
-  type,
-  defaultFormat,
-  icon,
-  formatsByLang,
-}: {
-  type: 'date' | 'time' | 'dateTime';
-  defaultFormat: string;
-  icon: string;
-  formatsByLang: Record<Lang, string[]>;
-}) => {
+const getFormat = (type: PickerType, locale: Locale): string => {
+  switch (type) {
+    case 'date': {
+      return locale.adLocale.dateFormat;
+    }
+    case 'time': {
+      return 'HH:mm';
+    }
+    case 'dateTime': {
+      return `${locale.adLocale.dateFormat} ${locale.adLocale.timeFormat}`;
+    }
+  }
+};
+
+const getFmtValue = (
+  value: string,
+  type: PickerType,
+  schema: DateSchema,
+  locale: Locale
+): string => {
+  return value
+    ? format(strDateToDate(value, type), schema.format, {
+        locale: locale.formatLocale,
+      })
+    : '';
+};
+
+const getFmtContent = (date: Date[], type: PickerType) => {
+  const fmt = (() => {
+    switch (type) {
+      case 'date': {
+        return 'yyyy/MM/dd';
+      }
+      case 'time': {
+        return 'HH:mm';
+      }
+      case 'dateTime': {
+        return 'yyyy/MM/dd HH:mm';
+      }
+    }
+  })();
+  return date[0] ? format(date[0], fmt) : '';
+};
+
+export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) => {
+  const defaultLocale = 'en';
+  const defaultFormat = getFormat(type, getAirDatepickerLocale(defaultLocale));
+
   const plugin: Plugin<DateSchema> = {
-    ui: (arg) => {
-      const { schema, value, onChange, rootElement, mode, options, i18n } = arg;
-      injectStyles(airDatepickerCss);
+    ui: async (arg) => {
+      const { schema, value, onChange, rootElement, mode, options } = arg;
 
-      const beforeRemoveEvent = new Event('beforeRemove');
-      rootElement.dispatchEvent(beforeRemoveEvent);
+      const locale = getAirDatepickerLocale(schema.locale || options.lang || defaultLocale);
 
-      const textStyle: CSS.Properties = {
-        fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
-        color: schema.fontColor ?? DEFAULT_FONT_COLOR,
-        fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
-        letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-        textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-        backgroundColor: getBackgroundColor(value, schema),
-
-        margin: '0',
-        padding: '0',
-        border: 'none',
-        outline: 'none',
+      const textElement = document.createElement('div');
+      const textElementStyle: CSS.Properties = {
         width: `${schema.width}mm`,
         height: `${schema.height}mm`,
         display: 'flex',
         flexDirection: 'column',
         justifyContent: mapVerticalAlignToFlex(VERTICAL_ALIGN_MIDDLE),
-        position: 'relative',
       };
+      Object.assign(textElement.style, textElementStyle);
 
-      const input = document.createElement('input');
+      await text.ui({
+        ...arg,
+        rootElement: textElement,
+        mode: 'viewer',
+        value: getFmtValue(value, type, schema, locale),
+        schema: {
+          ...schema,
+          verticalAlignment: VERTICAL_ALIGN_MIDDLE,
+          lineHeight: DEFAULT_LINE_HEIGHT,
+        },
+      });
+
+      injectStyles(airDatepickerCss);
 
-      Object.assign(input.style, textStyle);
+      const beforeRemoveEvent = new Event('beforeRemove');
+      rootElement.dispatchEvent(beforeRemoveEvent);
+
+      const input = document.createElement('input');
+      Object.assign(input.style, { visibility: 'hidden', position: 'absolute' });
 
       const commitChange = ({ datepicker }: { datepicker: AirDatepicker<HTMLInputElement> }) => {
         if (onChange) {
-          const date = datepicker.selectedDates;
-          const fmt =
-            type === 'time' ? 'HH:mm' : type === 'date' ? 'yyyy/MM/dd' : 'yyyy/MM/dd HH:mm';
-          const d = Array.isArray(date) ? date[0] : date || '';
-          const value = d ? format(d, fmt) : '';
-          onChange({ key: 'content', value });
+          onChange({ key: 'content', value: getFmtContent(datepicker.selectedDates, type) });
         }
       };
 
       const airDatepicker = new AirDatepicker(input, {
-        locale: getAirDatepickerLocale(options.lang || 'en'),
+        locale: locale.adLocale,
         selectedDates: [strDateToDate(value, type)],
-        dateFormat: (date) => (schema.format ? format(date, schema.format) : ''),
+        dateFormat: (date) => format(date, schema.format, { locale: locale.formatLocale }),
         timepicker: type !== 'date',
         onlyTimepicker: type === 'time',
         isMobile: window.innerWidth < 768,
         buttons: [
           'clear',
           {
-            content: i18n('close'),
+            content: locale.close,
             onClick: (datepicker) => {
               datepicker.hide();
               commitChange({ datepicker });
@@ -165,61 +279,86 @@ export const getPlugin = ({
       });
 
       rootElement.addEventListener('beforeRemove', () => {
-        if (mode === 'designer') {
+        if (isEditable(mode, schema)) {
           airDatepicker.destroy();
         }
       });
-      input.addEventListener('click', () => {
-        if (mode === 'designer') {
+      textElement.addEventListener('click', () => {
+        if (isEditable(mode, schema)) {
           airDatepicker.show();
         }
       });
 
       rootElement.appendChild(input);
+      rootElement.appendChild(textElement);
     },
     pdf: (arg) => {
-      const { schema, value } = arg;
+      const { schema, value, options } = arg;
       if (!value) return void 0;
-      const date = strDateToDate(value, type);
-      const formattedValue = format(date, schema.format);
-      return text.pdf(
-        Object.assign(arg, {
-          value: formattedValue,
-          schema: {
-            ...schema,
-            verticalAlignment: VERTICAL_ALIGN_MIDDLE,
-            lineHeight: DEFAULT_LINE_HEIGHT,
-          },
-        })
-      );
+      const locale = getAirDatepickerLocale(schema.locale || options.lang || defaultLocale);
+      return text.pdf({
+        ...arg,
+        value: getFmtValue(value, type, schema, locale),
+        schema: {
+          ...schema,
+          verticalAlignment: VERTICAL_ALIGN_MIDDLE,
+          lineHeight: DEFAULT_LINE_HEIGHT,
+        },
+      });
     },
     propPanel: {
-      schema: ({ options, i18n }) => {
+      schema: ({ options, i18n, activeSchema, changeSchemas }) => {
         const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
-        const lang = options.lang || 'en';
-        const locale = getDateFnsLocale(lang);
-
         const fontNames = Object.keys(font);
         const fallbackFontName = getFallbackFontName(font);
 
+        const locale = getAirDatepickerLocale(
+          (activeSchema as any).locale || options.lang || defaultLocale
+        );
+
+        if (
+          (activeSchema as any).locale === undefined &&
+          (activeSchema as any).locale !== options.lang
+        ) {
+          changeSchemas([
+            { schemaId: activeSchema.id, key: 'locale', value: options.lang },
+            { schemaId: activeSchema.id, key: 'format', value: getFormat(type, locale) },
+          ]);
+        }
+
         const formatter = getExtraFormatterSchema(i18n);
         formatter.buttons = formatter.buttons.filter(
           (button) => button.key === Formatter.ALIGNMENT
         );
 
-        const currentDate = new Date();
+        const validateDateTimeFormat = (_rule: any, formatString: string): boolean => {
+          try {
+            format('Thu Jan 01 1970 00:00:00 GMT+0000', formatString, {
+              locale: locale.formatLocale,
+            });
+            return true;
+          } catch (_err) {
+            return false;
+          }
+        };
+
+        const localeOptions = Object.keys(LOCALE_MAP).map((lc) => ({
+          label: `${lc} (${LOCALE_MAP[lc].label})`,
+          value: lc,
+        }));
 
         const dateSchema: Record<string, PropPanelSchema> = {
           format: {
             title: i18n('schemas.date.format'),
             type: 'string',
-            widget: 'select',
-            props: {
-              options: formatsByLang[lang].map((formatString) => ({
-                label: `${formatString} (${format(currentDate, formatString, { locale })})`,
-                value: formatString,
-              })),
-            },
+            default: getFormat(type, locale),
+            placeholder: getFormat(type, locale),
+            rules: [
+              {
+                validator: validateDateTimeFormat,
+                message: i18n('validation.dateTimeFormat'),
+              },
+            ],
             span: 24,
           },
           fontName: {
@@ -227,6 +366,7 @@ export const getPlugin = ({
             type: 'string',
             widget: 'select',
             default: fallbackFontName,
+            placeholder: fallbackFontName,
             props: { options: fontNames.map((name) => ({ label: name, value: name })) },
             span: 12,
           },
@@ -250,7 +390,7 @@ export const getPlugin = ({
             type: 'string',
             widget: 'color',
             props: {
-              disabledAlpha: true
+              disabledAlpha: true,
             },
             rules: [
               {
@@ -264,7 +404,7 @@ export const getPlugin = ({
             type: 'string',
             widget: 'color',
             props: {
-              disabledAlpha: true
+              disabledAlpha: true,
             },
             rules: [
               {
@@ -273,6 +413,15 @@ export const getPlugin = ({
               },
             ],
           },
+          locale: {
+            title: i18n('schemas.date.locale'),
+            type: 'string',
+            widget: 'select',
+            props: {
+              options: localeOptions,
+            },
+            span: 16,
+          },
         };
 
         return dateSchema;
@@ -281,7 +430,7 @@ export const getPlugin = ({
         name: '',
         format: defaultFormat,
         type,
-        content: format(new Date(), defaultFormat),
+        content: getFmtContent([new Date()], type),
         position: { x: 0, y: 0 },
         width: 50,
         height: 10,
@@ -292,6 +441,7 @@ export const getPlugin = ({
         fontColor: DEFAULT_FONT_COLOR,
         fontName: undefined,
         backgroundColor: '',
+        locale: undefined,
         opacity: DEFAULT_OPACITY,
       },
     },