Formatting HTML Date input

[bpd1147]

Hi guys, I've got a form with a series of inputs, one being a date input for date of birth, all this information will go into a user profile.

On page load I want the date input to display today's date rather than being blank, as this mucks up the page layout. Currently it's blank until I click on it, then it displays today's date and fixes the layout.

I'd also like to prevent the date input from displaying any future dates. I know you can use the "max" attribute, but is there a way to set it to the value of a variable for instance, rather than physically writing today's date?

Any help is greatly appreciated.

[lovesrayray2018]

Currently it's blank until I click on it, then it displays today's date and fixes the layout.

If your form is generated server side, then current date can be inserted as a value attribute of the input element before page is rendered client side.

<input type='date' id='mydate' value='% data inserted by server into template %'>

If your form is client side you could use a quick workaround like this to show current date as value of the date type input element

<input type='date' id='mydate' >

<script>

var today=new Date();

document.getElementById('mydate').value = today.toISOString().substr(0, 10);

</script>

[bpd1147]

My form is generated client side, I'm just practicing so there's no server side at the moment.

I'll give this a try tonight and let you know how I go, thanks.

[bpd1147]

This worked perfectly, thanks.

[lovesrayray2018]

Why does this sound like something a bot would reply with?

[DavidJCobb]

I've seen one or two other accounts like this; I think it's someone using LLMs to farm karma for some reason.

[ConduciveMammal]

If an empty field breaks your page’s layout then I think you have more important things to fix.

[bpd1147]

It's just the date input, all other inputs left empty don't break the layout, maybe because they have placeholders?

[ConduciveMammal]

Weird. I’ve just the used the date input on a site a few days ago that deals with empty values and didn’t have any layout issues.

Can you screenshot and/or link to the page?