Hide invalid dates in luxon

I'm trying to format an HTML layout to not show my date elements if they are invalid. I have a "Created" date and an "Updated" date, so at the very least one field will be empty quite often.

I'm trying to use luxon's isValid() within a script in my layout in order to selectively include the date or overwrite it. The problem is, all dates—valid or invalid— are now not being included. Beyond the basics, I'm a huge novice at frontend so I'm sure it's something simple.

Here's what I currently have within the layout head:

<h1>{{ title }}</h1>

<script type = "text/javascript">
    if (created.isValid() === true) {
        document.write('<p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>')
    } else {
        document.write("")
    }
</script>

<script type = "text/javascript">
    if (updated.isValid() === true) {
        document.write('<p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p>')
    } else {
        document.write("")
    }
</script>

I've also tried approaching it like this:

<script>
created.isValid() ? <p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p> : "";
</script>

<script>
updated.isValid() ? <p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p> : "";
</script>

I'm pretty sure this is stemming from me still not fully grasping the semantics of JavaScript and HTML docs, but I'm still at the stage where I don't know what I don't know.

Any help would be greatly appreciated!

Solution

(This should be a comment, but I need to write a bit more.)

I just noticed the eleventy tag, so I think I know get what is happening here. I'm not really familiar with eleventy, so this should be taken with a grain of salt.

First off, you need to distunguish between what happens when the site is generated by eleventy ("backend") and what script runs later in the browser of the viewer ("frontend"). You are trying to use JavaScript (<script>) which is "frontend", but the variables are part of eleventy, which is the "backend". And the "frontend" (normally) doesn't have access to those.

So you need to write backend code, to access those variables. In this case it's the template engine handlebars.

However you can't call methods such as isValid() with handlebars. Instead you need to call is somewhere outside, probably where you are creating the luxon values for created and updated. As I said I'm not familiar with eleventy, so I can't tell you what exactly you have to do.

EDIT based on comment:

I believe you basically have to define new variables, for example, createdValid and define it as created.isValid(). However I'm not sure if this is possible with a yaml file, if I understood the documentation correctly. I believe the relevant documentation is: https://www.11ty.dev/docs/data-computed/

And then you can use those new variables in handlebars using #if blocks. Something like:

{{#if createdValid}}
  <p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>
{{/if}}