gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

options (setting) feature: add UI for cutom date time format (Alt+t) under options/Text Notes

Browse Source
This commit is contained in:
iamvann 2025-05-16 22:42:08 +08:00
parent 82a437f2a8
commit 5da0053f6a
2 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/widgets/type_widgets/content_widget.js
View File

@ -8,6 +8,7 @@ import KeyboardShortcutsOptions from "./options/shortcuts.js";
import HeadingStyleOptions from "./options/text_notes/heading_style.js";
import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
import HighlightsListOptions from "./options/text_notes/highlights_list.js";
import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
import VimKeyBindingsOptions from "./options/code_notes/vim_key_bindings.js";
import WrapLinesOptions from "./options/code_notes/wrap_lines.js";
@ -66,6 +67,7 @@ const CONTENT_WIDGETS = {
HeadingStyleOptions,
TableOfContentsOptions,
HighlightsListOptions,
DateTimeFormatOptions,
TextAutoReadOnlySizeOptions
],
_optionsCodeNotes: [

74
src/public/app/widgets/type_widgets/options/text_notes/date_time_format.js Normal file
View File

@ -0,0 +1,74 @@
import OptionsWidget from "../options_widget.js";
const TPL = `
<div class="options-section">
<h4>Custom Date/Time Format (Alt+T)</h4>
<p>
Define a custom format for the date and time inserted using the Alt+T shortcut.
Uses <a href="https://day.js.org/docs/en/display/format" target="_blank" rel="noopener noreferrer">Day.js format tokens</a>.
Refer to the Day.js documentation for valid tokens.
</p>
<p>
<strong>Important:</strong> If you provide a string that Day.js cannot interpret as a format,
the literal string you typed might be inserted. If the format string is empty, or if Day.js
encounters an internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.
</p>
<div class="form-group">
<label for="customDateTimeFormatInput" style="margin-right: 10px;">Format String:</label>
<input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input" placeholder="e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D" style="width: 300px; display: inline-block;">
</div>
<p style="margin-top: 5px;">
<em>Examples of valid Day.js formats:</em>
<code>YYYY-MM-DD HH:mm</code> (Default-like),
<code>DD.MM.YYYY</code>,
<code>MMMM D, YYYY h:mm A</code>,
<code>[Today is] dddd</code>
</p>
</div>
`;
export default class DateTimeFormatOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$formatInput = this.$widget.find(
"input.custom-datetime-format-input"
);
//listen to input
this.$formatInput.on("input", () => {
const formatString = this.$formatInput.val();
this.updateOption("customDateTimeFormatString", formatString);
});
return this.$widget; //render method to return the widget
}
async optionsLoaded(options) {
//todo: update the key in updateOption
const currentFormat = options.customDateTimeFormatString || "";
if (this.$formatInput) {
this.$formatInput.val(currentFormat);
} else {
console.warn(
"DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
);
const inputField = this.$widget.find(
"input.custom-datetime-format-input"
);
if (inputField.length) {
this.$formatInput = inputField;
this.$formatInput.val(currentFormat);
} else {
console.error(
"DateTimeFormatOptions: Could not find format input field in optionsLoaded."
);
}
}
}
}