Для того, чтобы на вашем баннере (или любом другом блоке) была крутая фишка с «успейте применить промокод до ЧЧ.ММ.ГГ», вам потребуется две вещи:
Сосредоточимся на втором пункте.
В первую очередь, необходимо подключить скрипты в <head>:
<!-- Include the `amp-date-display` component ... -->
<script async nomodule custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js" crossorigin="anonymous"></script>
<script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.mjs" type="module" crossorigin="anonymous"></script>
<!-- ... and the `amp-mustache` component in the header -->
<script async nomodule custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" type="module" crossorigin="anonymous"></script>
Сам компонент выглядит так (на примере внутри вёрстки, чтобы нагляднее показать, как его интегрировать):
<div class="text">
<p><i>+150{9e7c37a3e427cc1a09b57a0d4b1ef3efe0db984258defcf01c5f2d21a33110d9}</i> на первый депозит до
<amp-date-display datetime="now" offset-seconds="259200" locale="de" layout="fixed" width="215" height="41">
<template type="amp-mustache">
<div>{{day}}.{{monthTwoDigit}}.{{year}}</div>
</template>
</amp-date-display>
</p>
</div>Для того, чтобы компонент прибавлял дни к текущей дате (атрибут datetime=»now»), необходим атрибут offset-seconds=»259200″, в значение которому указываются секунды (три дня = 259200 секунд).
Формат даты тоже может быть разным:
| Переменная | Вид для пользователя |
|---|---|
| day | 5 |
| dayName | Wednesday |
| dayNameShort | Wed |
| dayPeriod | pm |
| dayTwoDigit | 05 |
| hour | 14 |
| hour12 | 2 |
| hour12TwoDigit | 02 |
| hourTwoDigit | 14 |
| iso | 2024-06-05T11:53:39.271Z |
| minute | 53 |
| minuteTwoDigit | 53 |
| month | 6 |
| monthName | June |
| monthNameShort | Jun |
| monthTwoDigit | 06 |
| second | 39 |
| secondTwoDigit | 39 |
| year | 2024 |
| yearTwoDigit | 24 |
Остальные детали можно изучить в документации компонента.