#591 - Added date format support on datetime field

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
 

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,

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'

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);
       }
     }
 

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,

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) {

src/models/PanelSettings.ts

@@ -101,6 +101,7 @@ export interface Field {
   // Date fields
   isPublishDate?: boolean;
   isModifiedDate?: boolean;
+  dateFormat?: string;
 
   // Data file
   dataFileId?: string;

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -41,6 +41,19 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
     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<IDateTimeFieldProps> = ({
           timeInputLabel="Time:"
           dateFormat={DateHelper.formatUpdate(format) || 'MM/dd/yyyy HH:mm'}
           customInput={<CustomInput />}
-          showTimeInput
+          showTimeInput={hasTimeFormat}
         />
 
         <button

src/panelWebView/components/Fields/WrapperField.tsx

@@ -180,7 +180,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           description={field.description}
           value={fieldValue}
           required={!!field.required}
-          format={settings?.date?.format}
+          format={field.dateFormat || settings?.date?.format}
           onChange={(date) => onSendUpdate(field.name, date, parentFields)}
         />
       </FieldBoundary>