diff --git a/CHANGELOG.md b/CHANGELOG.md index 78f3008f..08ea60e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - [#568](https://github.com/estruyf/vscode-front-matter/issues/568): Update the preview URL if the slug changes - [#586](https://github.com/estruyf/vscode-front-matter/issues/586): Allow to specify the content card fields - [#588](https://github.com/estruyf/vscode-front-matter/issues/588): Added extensibility support to override card fields +- [#591](https://github.com/estruyf/vscode-front-matter/issues/591): Support for date format in the `datetime` field ### ⚡️ Optimizations diff --git a/package.json b/package.json index 88679ee6..f8951353 100644 --- a/package.json +++ b/package.json @@ -1230,6 +1230,11 @@ "default": false, "description": "Specify if the field should encode emoji" }, + "dateFormat": { + "type": "string", + "default": "", + "description": "Specify the date format to use" + }, "required": { "type": "boolean", "default": false, diff --git a/src/commands/Article.ts b/src/commands/Article.ts index 9da7a049..0e5753a2 100644 --- a/src/commands/Article.ts +++ b/src/commands/Article.ts @@ -368,10 +368,12 @@ export class Article { /** * Format the date to the defined format */ - public static formatDate(dateValue: Date): string { + public static formatDate(dateValue: Date, fieldDateFormat?: string): string { const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string; - if (dateFormat && typeof dateFormat === 'string') { + if (fieldDateFormat) { + return format(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string); + } else if (dateFormat && typeof dateFormat === 'string') { return format(dateValue, DateHelper.formatUpdate(dateFormat) as string); } else { return typeof dateValue.toISOString === 'function' diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts index 2791c0b4..5201cb47 100644 --- a/src/helpers/ArticleHelper.ts +++ b/src/helpers/ArticleHelper.ts @@ -347,7 +347,7 @@ export class ArticleHelper { for (const dateField of dateFields) { if (typeof metadata[dateField.name] !== 'undefined') { - metadata[dateField.name] = Article.formatDate(new Date()); + metadata[dateField.name] = Article.formatDate(new Date(), dateField.dateFormat); } } diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts index 8cf5da62..1ea4585a 100644 --- a/src/helpers/ContentType.ts +++ b/src/helpers/ContentType.ts @@ -794,7 +794,11 @@ export class ContentType { for (const field of obj.fields) { if (field.name === 'title') { if (field.default) { - data[field.name] = processKnownPlaceholders(field.default, titleValue, dateFormat); + data[field.name] = processKnownPlaceholders( + field.default, + titleValue, + field.dateFormat || dateFormat + ); data[field.name] = await ArticleHelper.processCustomPlaceholders( data[field.name], titleValue, @@ -812,7 +816,11 @@ export class ContentType { const defaultValue = field.default; if (typeof defaultValue === 'string') { - data[field.name] = processKnownPlaceholders(defaultValue, titleValue, dateFormat); + data[field.name] = processKnownPlaceholders( + defaultValue, + titleValue, + field.dateFormat || dateFormat + ); data[field.name] = await ArticleHelper.processCustomPlaceholders( data[field.name], titleValue, diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts index a55c32d0..ad227a42 100644 --- a/src/listeners/panel/DataListener.ts +++ b/src/listeners/panel/DataListener.ts @@ -213,14 +213,10 @@ export class DataListener extends BaseListener { } }); - // const isDateField = dateFields.some((f) => f.name === field); - // const isMultiImageField = imageFields.some((f) => f.name === field); - // const isMultiFileField = fileFields.some((f) => f.name === field); - if (dateFieldsArray && dateFieldsArray.length > 0) { for (const dateField of dateFieldsArray) { if (field === dateField.name && value) { - parentObj[field] = Article.formatDate(new Date(value)); + parentObj[field] = Article.formatDate(new Date(value), dateField.dateFormat); } } } else if (multiImageFieldsArray || multiFileFieldsArray) { diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index f292835b..570dbc52 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -101,6 +101,7 @@ export interface Field { // Date fields isPublishDate?: boolean; isModifiedDate?: boolean; + dateFormat?: string; // Data file dataFileId?: string; diff --git a/src/panelWebView/components/Fields/DateTimeField.tsx b/src/panelWebView/components/Fields/DateTimeField.tsx index f066ff48..126a2729 100644 --- a/src/panelWebView/components/Fields/DateTimeField.tsx +++ b/src/panelWebView/components/Fields/DateTimeField.tsx @@ -41,6 +41,19 @@ export const DateTimeField: React.FunctionComponent = ({ return required && !dateValue; }, [required, dateValue]); + const hasTimeFormat = useMemo(() => { + if (!format) { + return true; + } + + return format?.toLowerCase().includes('h') || + format?.includes('m') || + format?.toLowerCase().includes('s') || + format?.toLowerCase().includes('a') || + format?.toLowerCase().includes('b') || + format?.toLowerCase().includes('k'); + }, [format]); + useEffect(() => { const crntValue = DateHelper.tryParse(value, format); const stateValue = DateHelper.tryParse(dateValue, format); @@ -61,7 +74,7 @@ export const DateTimeField: React.FunctionComponent = ({ timeInputLabel="Time:" dateFormat={DateHelper.formatUpdate(format) || 'MM/dd/yyyy HH:mm'} customInput={} - showTimeInput + showTimeInput={hasTimeFormat} />