add feature to customize date formatting

src/api/apis/MALAPI.ts

@@ -8,6 +8,7 @@ import { MediaType } from '../../utils/MediaType';
 export class MALAPI extends APIModel {
 	plugin: MediaDbPlugin;
 	typeMappings: Map<string, string>;
+	apiDateFormat: string = 'YYYY-MM-DDTHH:mm:ssZ'; // ISO
 
 	constructor(plugin: MediaDbPlugin) {
 		super();
@@ -115,7 +116,7 @@ export class MALAPI extends APIModel {
 				image: result.images?.jpg?.image_url ?? '',
 
 				released: true,
-				premiere: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
+				premiere: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
 				streamingServices: result.streaming?.map((x: any) => x.name) ?? [],
 
 				userData: {
@@ -146,7 +147,7 @@ export class MALAPI extends APIModel {
 				image: result.images?.jpg?.image_url ?? '',
 
 				released: true,
-				premiere: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
+				premiere: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
 				streamingServices: result.streaming?.map((x: any) => x.name) ?? [],
 
 				userData: {
@@ -176,8 +177,8 @@ export class MALAPI extends APIModel {
 				image: result.images?.jpg?.image_url ?? '',
 
 				released: true,
-				airedFrom: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
-				airedTo: new Date(result.aired?.to).toLocaleDateString() ?? 'unknown',
+				airedFrom: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
+				airedTo: this.plugin.dateFormatter.format(result.aired?.to, this.apiDateFormat) ?? 'unknown',
 				airing: result.airing,
 
 				userData: {

src/api/apis/OMDbAPI.ts

@@ -9,6 +9,7 @@ import { MediaType } from '../../utils/MediaType';
 export class OMDbAPI extends APIModel {
 	plugin: MediaDbPlugin;
 	typeMappings: Map<string, string>;
+	apiDateFormat: string = 'DD MMM YYYY';
 
 	constructor(plugin: MediaDbPlugin) {
 		super();
@@ -142,7 +143,7 @@ export class OMDbAPI extends APIModel {
 
 				released: true,
 				streamingServices: [],
-				premiere: new Date(result.Released).toLocaleDateString() ?? 'unknown',
+				premiere: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
 
 				userData: {
 					watched: false,
@@ -173,7 +174,7 @@ export class OMDbAPI extends APIModel {
 				released: true,
 				streamingServices: [],
 				airing: false,
-				airedFrom: new Date(result.Released).toLocaleDateString() ?? 'unknown',
+				airedFrom: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
 				airedTo: 'unknown',
 
 				userData: {
@@ -199,7 +200,7 @@ export class OMDbAPI extends APIModel {
 				image: result.Poster ?? '',
 
 				released: true,
-				releaseDate: new Date(result.Released).toLocaleDateString() ?? 'unknown',
+				releaseDate: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
 
 				userData: {
 					played: false,

src/api/apis/SteamAPI.ts

@@ -8,6 +8,7 @@ import { MediaType } from '../../utils/MediaType';
 export class SteamAPI extends APIModel {
 	plugin: MediaDbPlugin;
 	typeMappings: Map<string, string>;
+	apiDateFormat: string = 'DD MMM, YYYY';
 
 	constructor(plugin: MediaDbPlugin) {
 		super();
@@ -109,7 +110,7 @@ export class SteamAPI extends APIModel {
 			image: result.header_image ?? '',
 
 			released: !result.release_date?.comming_soon,
-			releaseDate: new Date(result.release_date?.date).toLocaleDateString() ?? 'unknown',
+			releaseDate: this.plugin.dateFormatter.format(result.release_date?.date, this.apiDateFormat) ?? 'unknown',
 
 			userData: {
 				played: false,

src/api/apis/WikipediaAPI.ts

@@ -6,6 +6,7 @@ import { MediaType } from '../../utils/MediaType';
 
 export class WikipediaAPI extends APIModel {
 	plugin: MediaDbPlugin;
+	apiDateFormat: string = 'YYYY-MM-DDTHH:mm:ssZ'; // ISO
 
 	constructor(plugin: MediaDbPlugin) {
 		super();
@@ -72,7 +73,7 @@ export class WikipediaAPI extends APIModel {
 			id: result.pageid,
 
 			wikiUrl: result.fullurl,
-			lastUpdated: new Date(result.touched).toLocaleDateString() ?? 'unknown',
+			lastUpdated: this.plugin.dateFormatter.format(result.touched, this.apiDateFormat),
 			length: result.length,
 
 			userData: {},

src/main.ts

@@ -15,13 +15,15 @@ import { YAMLConverter } from './utils/YAMLConverter';
 import { MediaDbFolderImportModal } from './modals/MediaDbFolderImportModal';
 import { PropertyMapping, PropertyMappingModel } from './settings/PropertyMapping';
 import { ModalHelper, ModalResultCode, SearchModalOptions } from './utils/ModalHelper';
+import { DateFormatter } from './utils/DateFormatter';
 
 export default class MediaDbPlugin extends Plugin {
 	settings: MediaDbPluginSettings;
 	apiManager: APIManager;
 	mediaTypeManager: MediaTypeManager;
 	modelPropertyMapper: PropertyMapper;
 	modalHelper: ModalHelper;
+	dateFormatter: DateFormatter;
 
 	frontMatterRexExpPattern: string = '^(---)\\n[\\s\\S]*?\\n---';
 
@@ -39,13 +41,15 @@ export default class MediaDbPlugin extends Plugin {
 		this.mediaTypeManager = new MediaTypeManager();
 		this.modelPropertyMapper = new PropertyMapper(this);
 		this.modalHelper = new ModalHelper(this);
+		this.dateFormatter = new DateFormatter();
 
 		await this.loadSettings();
 		// register the settings tab
 		this.addSettingTab(new MediaDbSettingTab(this.app, this));
 
 		this.mediaTypeManager.updateTemplates(this.settings);
 		this.mediaTypeManager.updateFolders(this.settings);
+		this.dateFormatter.setFormat(this.settings.customDateFormat);
 
 		// add icon to the left ribbon
 		const ribbonIconEl = this.addRibbonIcon('database', 'Add new Media DB entry', () => this.createEntryWithAdvancedSearchModal());
@@ -563,6 +567,7 @@ export default class MediaDbPlugin extends Plugin {
 	async saveSettings(): Promise<void> {
 		this.mediaTypeManager.updateTemplates(this.settings);
 		this.mediaTypeManager.updateFolders(this.settings);
+		this.dateFormatter.setFormat(this.settings.customDateFormat);
 
 		await this.saveData(this.settings);
 	}

src/settings/Settings.ts

@@ -7,12 +7,14 @@ import PropertyMappingModelsComponent from './PropertyMappingModelsComponent.sve
 import { PropertyMapping, PropertyMappingModel, PropertyMappingOption } from './PropertyMapping';
 import { MEDIA_TYPES } from '../utils/MediaTypeManager';
 import { MediaTypeModel } from '../models/MediaTypeModel';
+import { fragWithHTML } from '../utils/Utils';
 
 export interface MediaDbPluginSettings {
 	OMDbKey: string;
 	sfwFilter: boolean;
 	useCustomYamlStringifier: boolean;
 	templates: boolean;
+	customDateFormat: string;
 
 	movieTemplate: string;
 	seriesTemplate: string;
@@ -50,6 +52,7 @@ const DEFAULT_SETTINGS: MediaDbPluginSettings = {
 	sfwFilter: true,
 	useCustomYamlStringifier: true,
 	templates: true,
+	customDateFormat: 'L',
 
 	movieTemplate: '',
 	seriesTemplate: '',
@@ -165,6 +168,23 @@ export class MediaDbSettingTab extends PluginSettingTab {
 				});
 			});
 
+		new Setting(containerEl)
+			.setName('Date format')
+			.setDesc(fragWithHTML("Your custom date format. Use <em>\'YYYY-MM-DD\'</em> for example.<br>" +
+				"For more syntax, refer to <a href='https://momentjs.com/docs/#/displaying/format/'>format reference</a>.<br>" +
+				"Your current syntax looks like this: <b><a id='media-db-dateformat-preview' style='pointer-events: none; cursor: default; text-decoration: none;'>" +
+				this.plugin.dateFormatter.getPreview() + "</a></b>"))
+			.addText(cb => {
+				cb.setPlaceholder(DEFAULT_SETTINGS.customDateFormat)
+					.setValue(this.plugin.settings.customDateFormat === DEFAULT_SETTINGS.customDateFormat ? '' : this.plugin.settings.customDateFormat)
+					.onChange(data => {
+						const newDateFormat = data ? data : DEFAULT_SETTINGS.customDateFormat;
+						this.plugin.settings.customDateFormat = newDateFormat;
+						document.getElementById('media-db-dateformat-preview').textContent = this.plugin.dateFormatter.getPreview(newDateFormat); // update preview
+						this.plugin.saveSettings();
+					});
+			});
+
 		containerEl.createEl('h3', { text: 'New File Location' });
 		// region new file location
 		new Setting(containerEl)

src/utils/DateFormatter.ts

@@ -0,0 +1,71 @@
+// obsidian already uses moment, so no need to package it twice!
+// import { moment } from 'obsidian'; // doesn't work for release build
+// obsidian uses a namespace-style import for moment, which ES6 doesn't allow anymore
+const obsidian = require('obsidian');
+const moment = obsidian.moment;
+
+export class DateFormatter {
+	toFormat: string;
+	locale: string;
+
+	constructor() {
+		this.toFormat = 'YYYY-MM-DD';
+		// get locale of this machine (e.g. en, en-gb, de, fr, etc.)
+		this.locale = new Intl.DateTimeFormat().resolvedOptions().locale;
+	}
+
+	setFormat(format: string): void {
+		this.toFormat = format;
+	}
+
+	getPreview(format?: string): string {
+		const today = moment();
+
+		if (!format) {
+			format = this.toFormat;
+		}
+
+		return today.locale(this.locale).format(format);
+	}
+
+	/**
+	 * Tries to format a given date string with the currently set date format.
+	 * You can set a date format by calling `setFormat()`.
+	 *
+	 * @param dateString the date string to be formatted
+	 * @param dateFormat the current format of `dateString`. When this is `null` and the actual format of the 
+	 * given date string is not `C2822` or `ISO` format, this function will try to guess the format by using the native `Date` module.
+	 * @param locale the locale of `dateString`. This is needed when `dateString` includes a month or day name and its locale format differs
+	 * from the locale of this machine.
+	 * @returns formatted date string or null if `dateString` is not a valid date
+	 */
+	format(dateString: string, dateFormat?: string, locale: string = 'en'): string | null {
+		if (!dateString) {
+			return null;
+		}
+
+		let date: moment.Moment;
+
+		if (!dateFormat) {
+			// reading date formats other then C2822 or ISO with moment is deprecated
+			// see https://momentjs.com/docs/#/parsing/string/
+			if (this.hasMomentFormat(dateString)) {
+				// expect C2822 or ISO format
+				date = moment(dateString);
+			} else {
+				// try to read date string with native Date
+				date = moment(new Date(dateString));
+			}
+		} else {
+			date = moment(dateString, dateFormat, locale);
+		}
+
+		// format date (if it is valid)
+		return date.isValid() ? date.locale(this.locale).format(this.toFormat) : null;
+	}
+
+	private hasMomentFormat(dateString: string): boolean {
+		const date = moment(dateString, true); // strict mode
+		return date.isValid();
+	}
+}

src/utils/Utils.ts

@@ -135,6 +135,8 @@ export function markdownTable(content: string[][]): string {
 	return table;
 }
 
+export const fragWithHTML = (html: string) => createFragment(frag => (frag.createDiv().innerHTML = html));
+
 export function dateToString(date: Date): string {
 	return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
 }