24h format

Site URL: https://www.hrselts.ee/uritused/h2h-meet-up-synlab

Hi!

Is there still no possibility of customizing the format to 24 hours, at least with the code?

I appreciate any help you can provide.

3 hours ago, estloris said:

Site URL: https://www.hrselts.ee/uritused/h2h-meet-up-synlab

Hi!

Is there still no possibility of customizing the format to 24 hours, at least with the code?

I appreciate any help you can provide.

This one?

Hi Beyondspace!

Yes 🙂 I'd like to have it 16:45-20:00 instead of 4:45PM-8:00PM.

Thank you in advance 😉

@estloris You can use this code to Website Tools > Code Injection > Footer

<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var timeformat = "H:MM";
     
      var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
            for (var i = 0; i < eventTime.length; i++) {
                  console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);
                var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);

                eventTime[i].innerHTML = d.format(timeformat); 
            }
      var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
            for (var i = 0; i < eventTimeSummary.length; i++) {
                  var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
                  var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
                  _12hrs.innerHTML = _24hrs.innerHTML;
            }
  });


</script>

Dear @tuanphan

Thank you! I inserted this code into the footer, but it has no effect 😞

On 10/17/2024 at 1:07 PM, estloris said:

Dear @tuanphan

Thank you! I inserted this code into the footer, but it has no effect 😞

I see it already shows here

Thank you a lot, @tuanphan

I checked it again and discovered that I only have a 24-hour format in Chrome. In Safari, it doesn't work for some reason 😞 I tried to delete browsing data, but it didn't help. It's strange 🙂 

I have discovered that I also have a 12h format in the Summary block, even in Chrome. Does it need to be changed separately?

On 10/21/2024 at 3:22 PM, estloris said:

Thank you a lot, @tuanphan

I checked it again and discovered that I only have a 24-hour format in Chrome. In Safari, it doesn't work for some reason 😞 I tried to delete browsing data, but it didn't help. It's strange 🙂 

I have discovered that I also have a 12h format in the Summary block, even in Chrome. Does it need to be changed separately?

This code should work with Summary.

Try this new code

<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		var timeformat = "H:MM";
     
		var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
		for (var i = 0; i < eventTime.length; i++) {
			var datePart = eventTime[i].getAttribute("datetime");
			var timePart = eventTime[i].innerText;
			var isoString = datePart + "T" + timePart;
			var d = new Date(isoString);

			if (!isNaN(d.getTime())) {
				eventTime[i].innerHTML = d.format(timeformat);
			}
		}

		var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
		for (var i = 0; i < eventTimeSummary.length; i++) {
			var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
			var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
			_12hrs.innerHTML = _24hrs.innerHTML;
		}
	});
</script>

Thank you once again, @tuanphan 🙂

The code still has no effect. 😞 It's applied now. Can you see 24h format? Maybe it's something with my browser.

On 10/28/2024 at 5:35 PM, estloris said:

Thank you once again, @tuanphan 🙂

The code still has no effect. 😞 It's applied now. Can you see 24h format? Maybe it's something with my browser.

Add this code under

<style>
  span.event-time-localized {
    display: none !important;
}

span.event-time-24hr {
    display: inline-block !important;
}
</style>

Hi, @tuanphan

In Summary it works like magic 🙂

But for some reason, the time disappeared from the event itself 😄 

On 10/30/2024 at 4:23 PM, tuanphan said:

Add this code under

<style>
  span.event-time-localized {
    display: none !important;
}

span.event-time-24hr {
    display: inline-block !important;
}
</style>

Change the code to this

<style>
  .summary-v2-block span.event-time-localized {
    display: none !important;
}

.summary-v2-block span.event-time-24hr {
    display: inline-block !important;
}
</style>

Hello, @tuanphan 🙂

It drives me crazy 😄 ahahaha. Sorry for torturing you 🙂

• The time in summary is in a 24-hour format. Great!
• Time in the event itself is back, but still in a 12-hour format 🤦🏻‍♂️

For double check — I have this code inserted

<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		var timeformat = "H:MM";
     
		var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
		for (var i = 0; i < eventTime.length; i++) {
			var datePart = eventTime[i].getAttribute("datetime");
			var timePart = eventTime[i].innerText;
			var isoString = datePart + "T" + timePart;
			var d = new Date(isoString);

			if (!isNaN(d.getTime())) {
				eventTime[i].innerHTML = d.format(timeformat);
			}
		}

		var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
		for (var i = 0; i < eventTimeSummary.length; i++) {
			var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
			var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
			_12hrs.innerHTML = _24hrs.innerHTML;
		}
	});
</script>
<style>
  .summary-v2-block span.event-time-localized {
    display: none !important;
}

.summary-v2-block span.event-time-24hr {
    display: inline-block !important;
}
</style>