Properties: let the user customize the way Dates/Times are displayed (independently from OS)

[Jeremias]

This worked for me. Thanks!

[ironhak]

+1 For this… Please please please

[bcarbonn]

I wrote a snippet to change MM-DD-YYYY to DD-MM-YYYY.

Before:

After:

Place this in your snippets folder, and enable it under Settings > Appearance.

Not perfect, but works.

/* Reorder date input from MM-DD-YYYY to DD-MM-YYYY */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
}

.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-day-field {
  order: 1;
}
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-month-field {
  order: 2;
}
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-year-field {
  order: 3;
}

/* Hide native separators (they render as "//" at start when reordered) */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-text {
  display: none;
}

/* Add slashes via background (::before/::after not supported on date pseudos) */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-day-field,
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-month-field {
  padding-right: 1ch;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Ctext x='0' y='12' font-size='12' fill='%23888' font-family='system-ui'%3E%2F%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right -2px center;
  background-size: 0.6em 1em;
}

[am4c130d]

Bless you - this is perfect, thank you!

[meierthered]

Thank you this worked perfectly, was diring me insane. So had to make an account just to thank you.

[excalibud]

Thanks for this! I noticed it only seems to work for date properties, not date & time properties. I tried my hand at adapting the CSS snippet to apply to date & time but couldn’t hack it. Any ideas how that could be done?

For anyone interested, here is an adaptation of @bcarbonn ‘s CSS snippet that renders the date property as YYYY-MM-DD rather than DD/MM/YYYY:

/* Reorder date input from MM-DD-YYYY to DD-MM-YYYY */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
}

.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-day-field {
  order: 3;
}
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-month-field {
  order: 2;
}
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-year-field {
  order: 1;
}

/* Hide native separators (they render as "//" at start when reordered) */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-text {
  display: none;
}

/* Add dashes via background (::before/::after not supported on date pseudos) */
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-year-field,
.metadata-input.mod-date[type="date"]::-webkit-datetime-edit-month-field {
padding-right: 1ch;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Ctext x='0' y='16' font-size='22' fill='%23444' font-family='system-ui'%3E-%3C%2Ftext%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right -2px center;
background-size: 0.6em 1em;
}

[VikingTiger]

There’s been a common misconception since forever, in computer software, that locale == language. Perhaps especially among US developers, but that could be a misleading impression. Within the field of IT, at least, there are many languages in which there are few or no universally established localized/national terms for many technical concepts and elements. As such, English easily becomes the international language, and the most obvious language of reference. Personally, I’ve always used English as the system language on all devices, since childhood. Mobile phones, computers, IoT devices, everything except the kids’ personal devices. The US date format, on the other hand, is in my opinion the most backwards of them all. There is an ISO standard, and that’s the one I want to use. Going to try the CSS workaround.

[LarsMB]

While the snippet works, it’s a bit awkward and indeed, conflating language with the various localization formats is suboptimal. This would really be very useful.

[Spark706]

While I am 100% missing the larger idea for the date/time concern, I would like toss out my simple method for handling this that may be insufficient for the OP’s use case.

My computer is set for MM/DD/YYYY and I am honestly too lazy to care about changing it. And yes that is pretty lazy, LOL.

But, as an engineer, my method for ensuring that i have my notes and files organized in a way that I can easily find them, I use YYYYMMDD_file_name in file names and in my Obsidian metadata I use a text field with Templates from the Core Plugins.

So in my Daily Note template for instance I have {{date:YYYY-MM-DD HH:mm:ss}}(see below)

I realize this is not at all a solution or anything, but maybe will help until a reasonable solution is available.