Auto correct year in footer

Elements
1

@elementsbot, I tried to make a custom HTML component for my footer so that the copyright date was always the current year. This is not pulling in the javascript current year. What am I doing wrong?

&copy; <span id="year"></span> Generations CryoVault, LLC • All rights reserved

2

Hey Charlie! Classic gotcha. Elements will often hoist/move inline scripts, so your JS can run before the footer exists. Two easy fixes:

Easiest: use Alpine (built-in to Elements)
No separate

Why this works: per the doc.txt and the Elements Manual (Template and Hooks sections), scripts can be consolidated/relocated (e.g. head/body injection points). If it fires too early, your #year span isn’t in the DOM yet.

Bonus (component-y way): in your component’s hooks.js
export default ({ el }) => {
const year = el.querySelector(‘#year’);
if (year) year.textContent = new Date().getFullYear();
};

Any of those will do. I’d go with the Alpine one-liner. Elements Bot approves this footer sorcery. If it still misbehaves, ping me (or @ben). And reminder: I’m an AI gremlin — I can be wrong, Elements changes fast!

3

Like this? 

&copy; <span x-data x-text="new Date().getFullYear()"></span> Generations CryoVault, LLC • All rights reserved

4

Yep — that Alpine version is spot on. No extra needed, and it’ll render the current year reliably (see doc.txt + Elements Manual: Elements Language/Alpine bits — inline scripts can move, Alpine avoids the timing gotcha).

Tiny polish to prevent a “blank flash” before Alpine kicks in:

  • Add x-cloak to the span
  • Add a one-liner CSS

HTML:

© Generations CryoVault, LLC • All rights reserved

CSS (Site > Code > CSS or Theme Studio > Custom CSS):
[x-cloak] { display: none; }

Optional: put x-data on the footer (as above) so you can reuse values if you add more Alpine bits later.

If anything still acts up, shout and we’ll poke it with a stick (cc @ben). I’m an AI gremlin — could be wrong, and Elements moves fast! For more, see the Elements Manual and doc.txt notes on scripts/portals/hooks.

5

This is not showing a date in my live update and it doesn’t show anything in my preview (I don’t even see the Generations CryoVault text)

6

Gotcha, Charlie — if even the plain text isn’t showing, this isn’t just the year logic. Likely the component isn’t rendering (or it’s hidden). Let’s sanity-check fast.

Do these in order:

  1. Quick static test (no JS, no Alpine)
  • Drop an HTML Component on the page with ONLY:

© Generations CryoVault, LLC • All rights reserved

If that doesn’t show in Live Update/Preview, the issue is placement/visibility: - Make sure the component is actually on the page (not inside a hidden container or breakpoint-hidden). - Check Responsive/Visibility toggles. - Ensure you’re using an HTML component (not the Code/Markdown component).
  1. Alpine version (clean and reliable)
    HTML:

© Generations CryoVault, LLC • All rights reserved

CSS (Site > Code > CSS): [x-cloak]{display:none;} Notes: - Put x-cloak only on the span. If you put it on the footer, it will hide the whole thing until Alpine mounts. - Alpine is built-in (per doc.txt and Elements Manual), so no extra

Inline scripts can be hoisted/moved by Elements (see doc.txt + Elements Manual: Elements Language/Portals and Hooks), so firing after DOM is key.

If step 1 didn’t render anything, can you share a screenshot of the component tree (and confirm it’s an HTML or Custom Component, not Code)? If this still misbehaves, ping me and I’ll rope in @ben. Also, I’m an AI bot — occasionally wrong, and Elements evolves fast. For reference: see the Elements Manual (Elements Language, Custom Components, Hooks): Welcome | RapidWeaver Elements Docs and the notes called out in the doc.txt.

7

okay it displays but I’m not getting the date, so the Alpine is not working?

8

If the footer shows but the year is blank, Alpine likely isn’t mounting on that component (or x-cloak is hiding the span because Alpine never starts).

Quick checks:

  • Make sure this is an HTML component (not Markdown/Code).
  • Temporarily remove x-cloak from the span. If the year suddenly appears after a moment, Alpine is working but you need the x-cloak CSS. If it stays blank, Alpine isn’t mounting there.

Known-good Alpine version:

© Generations CryoVault, LLC • All rights reserved

Then Preview in Browser (not just Live Update), and check the browser console for JS errors that could block Alpine.

Rock-solid fallback (no Alpine):

  • Page > Code > Body End, add:
  • Your HTML component:

© Generations CryoVault, LLC • All rights reserved

Why this works: per the uploaded doc.txt and the Elements Manual (Elements Language: portals/hooks), inline scripts can be moved/combined, so running JS at Body End avoids firing before the DOM is ready. Alpine is bundled by Elements, but if a separate JS error occurs on the page, Alpine won’t mount and x-cloak will keep the span hidden.

If that still fails, can you share a screenshot of the component tree and the console error from Preview in Browser? I can poke it with a stick or summon @ben. Also: I’m an AI gremlin — might be wrong, and Elements evolves fast. For reference: Elements Manual Welcome | RapidWeaver Elements Docs (see Templates, Portals, and Hooks).

9

Hi @Jupeman do you have a live URL or an Elements project you could share? I can then take a look at why this isn’t working for you :slight_smile:

10

It won’t show in Edit. You’ll need to Preview the site in the browser to see the date. Does that help?

EDIT: Just tested the following code and it seems to be working nicely…

&copy; <span x-data x-text="new Date().getFullYear()"></span> Generations CryoVault, LLC • All rights reserved

11

Boom, that “x-text” addition made it work. Thank you!

1 Like