Amphtml: amp-date-picker specify an initial date offset from current date

[RonnieWinter]

What's the feature?

I have tried to set up the amp date picker to automatically have a date set on the input as the page loads. I have looked at the documentation but in there the only way to set the date is when the user taps on the input.

How could the feature be implemented?

Since this is more of an event feature, I was thinking it could be something like this?:

<input name="date1" on="load:date-picker.today(offset=14)" role="textbox" tabindex="5" />

[aghassemi]

@cvializ @ro2ni3 I assume the date set as the value of input is picked up by date picker. @ro2ni3 is the issue that you need to manipulate the date via today + offset and it can not be static?

Event is not the right approach IMO, but supporting some form of variable substitution that allows this might be.

[cvializ]

Agreed, let's add this.

[RonnieWinter]

@aghassemi yes that's correct, the date value needs to be worked out on page load to be today + 14 days (dynamic) and set into the [value] of the input. Sorry, ignore the event idea.

[cvializ]

I plan to implement this by overloading the existing date, start-date and end-date attributes to accept ISO 8601 duration offset values e.g.

<!-- Initially set to 3 days in the future -->
<amp-date-picker date="P3D" mode="static" layout="fixed-height" height="360">
</amp-date-picker>

[aghassemi]

Implemented by https://github.com/ampproject/amphtml/pull/17388 and is live in production.

[RonnieWinter]

Thank you very much for adding this feature @aghassemi, @cvializ. It is working as expected but there are a few AMP validator issues that have now come up. When I add the new date attribute it complains saying that 'date' is not an allowed attribute in amp-date-picker given the mode and layout.
Here's the CodePen

Sorry I couldn't link to the AMP playground as it doesn't offer to save the html onto a permalink. So just copy that code from the CodePen into the playground and you will see 3 AMP validator errors.

I have tried solving these validation errors by doing what the validator suggests, but I can't make it go green as new errors appear. I'm not sure if these errors are correct or if the validation should be updated in order to accommodate for the new 'date' attribute.

On our build pipeline, the AMP validation is run before deployment to our staging environment which means it is failing at the moment because of these validation errors.

Update:

Also I have seen that it displays one more error when the amp-date-picker is wrapped around an as per this CodePen

Validation when adding date attribute:

Validation when adding date attribute in amp-date-picker wrapped in amp-lightbox:

[honeybadgerdontcare]

Here's a link to the Validator WebUI with that html: https://validator.ampproject.org/#url=https%3A%2F%2Fcodepen.io%2Fro2nie%2Fpen%2FXPaROp.html

There are three errors:

• The specified layout 'CONTAINER' is not supported by tag 'amp-date-picker[type=single][mode=static]'. Learn more.
• The attribute 'date' may not appear in tag 'amp-date-picker[type=single][mode=static]'. Learn more.
• The attribute 'mode' in tag 'amp-date-picker[type=single][mode=static]' is set to the invalid value 'overlay'. Learn more.

The central issue for validation is the date attribute which can only be used with mode=static and not mode=overlay.