Блог

Главная - Вопросы по программированию - AMP — Средство выбора даты с переменным количеством месяцев

AMP — Средство выбора даты с переменным количеством месяцев

#amp-html

#amp-html

Вопрос:

Я использую компонент amp-date-picker. Как я могу отображать разное количество месяцев в зависимости от размера экрана. Есть атрибут «количество месяцев», который можно установить, но мне нужно показывать один месяц только на мобильных устройствах, а на настольных устройствах показывать два числа месяцев рядом друг с другом (за пределами, например, 900 пикселей). Могу ли я динамически изменять атрибут number-of-months в amp-date-picker, предпочтительно с помощью css?

Ответ №1:

Могу ли я динамически изменять атрибут number-of-months в amp-date-picker, предпочтительно с помощью css? — Нет

Вы можете достичь своей цели, используя CSS media query с хитростью.

  1. Используйте два средства выбора даты, одно для настольных компьютеров, другое для мобильных устройств
  2. На рабочем столе скрыть средство выбора даты для мобильных устройств
  3. На мобильном устройстве скрыть средство выбора даты на рабочем столе

Требуется Html

 <div class="desktop">
    <h1>
      Desktop date picker
    </h1>
    <amp-date-picker
    id="src-picker-desktop"
    type="single"
    mode="overlay"
    layout="container"
    format="YYYY-MM-DD"
    number-of-months="2"
    src="https://ampbyexample.com/json/amp-date-picker.json"
    input-selector="#src-input-desktop"
    class="example-picker space-between">
    <input id="src-input-desktop" placeholder="Pick a date">
    <button on="tap: src-picker-desktop.clear">Clear</button>
    <template type="amp-mustache" date-template id="spooky">
      <span>🙀</span>
    </template>
  </amp-date-picker>
  </div>
  <div class="mobile">
    <h1>
      Mobile date picker
    </h1>
    <amp-date-picker
    id="src-picker-mobile"
    type="single"
    mode="overlay"
    layout="container"
    format="YYYY-MM-DD"
    src="https://ampbyexample.com/json/amp-date-picker.json"
    input-selector="#src-input-mobile"
    class="example-picker space-between">
    <input id="src-input-mobile" placeholder="Pick a date">
    <button on="tap: src-picker-mobile.clear">Clear</button>
    <template type="amp-mustache" date-template id="spooky">
      <span>🙀</span>
    </template>
  </amp-date-picker>
  </div>

Требуется CSS

 .mobile { display:none;} 
    @media (max-width: 767px) {
      .desktop { display:none;}
      .mobile { display:block;}
    }

Пример Нажмите здесь

 <!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <!-- ## Introduction
    [amp-date-picker](https://www.ampproject.org/docs/reference/components/amp-date-picker) is an AMP component which allows to select a single date or a range of dates.
    Its implementation is based on [react-dates](https://github.com/airbnb/react-dates)
  -->
  <!-- ## Setup -->
  <!--
    Include the `amp-date-picker` component.
  -->
  <script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <!--
    Include the `amp-bind` component to set variables based on the selected date.
  -->
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <!--
    Include the `amp-mustache` component to display an info panel below the date picker.
  -->
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <!--
    Include the `amp-lightbox` component to display a date picker inside a fullscreen lightbox view.
  -->
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <!--
    Include the `amp-form` component for creating forms.
  -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://ampbyexample.com/components/amp-date-picker/" >
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!--
    In order to personalize `amp-date-picker` style, you can use classes such as `CalendarMonth_caption`
    which are inherited from [react-dates](https://github.com/airbnb/react-dates).
    `amp-date-picker` also exposes CSS classes which you can use in CSS rule, like
    `amp-date-picker-selecting`, which is applied to the date input the user is editing.
  -->
  <style amp-custom>
  :root {
  --color-primary: #005AF0;
  --color-text-light: #fff;
  --color-bg-light: #FAFAFC;
  --space-2: 1rem;   /* 16px */
  --space-1: 0.5rem; /* 8px */
  }

  .example-picker {
    display: flex;
  }

  .example-picker[mode="overlay"] {
    padding: var(--space-2);
  }

  .example-picker .CalendarMonth_caption {
    color: var(--color-text-light);
  }

  .example-picker [type="range"] .amp-date-picker-selecting {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
  }

  .space-between > *   * {
    margin-left: var(--space-2);
  }

  #lb {
    background: var(--color-bg-light);
  }

  #lb .align-content-center {
    height: 100%;
  }

  .icon-input {
    background-image: url('data:image/svg xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1393.1 1500" style="enable-background:new 0 0 1393.1 1500;" xml:space="preserve"><path d="M107.2,1392.9h241.1v-241.1H107.2V1392.9z M401.9,1392.9h267.9v-241.1H401.9V1392.9z M107.2,1098.2h241.1V830.4H107.2 V1098.2z M401.9,1098.2h267.9V830.4H401.9V1098.2z M107.2,776.8h241.1V535.7H107.2V776.8z M723.4,1392.9h267.9v-241.1H723.4V1392.9z M401.9,776.8h267.9V535.7H401.9V776.8z M1044.8,1392.9H1286v-241.1h-241.1V1392.9z M723.4,1098.2h267.9V830.4H723.4V1098.2z M428.7,375V133.9c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375 c0,7.3,2.7,13.5,8,18.8c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C426,388.5,428.7,382.3,428.7,375z M1044.8,1098.2H1286 V830.4h-241.1V1098.2z M723.4,776.8h267.9V535.7H723.4V776.8z M1044.8,776.8H1286V535.7h-241.1V776.8z M1071.6,375V133.9 c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375c0,7.3,2.7,13.5,8,18.8 c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C1069,388.5,1071.6,382.3,1071.6,375z M1393.1,321.4v1071.4 c0,29-10.6,54.1-31.8,75.3c-21.2,21.2-46.3,31.8-75.3,31.8H107.2c-29,0-54.1-10.6-75.3-31.8C10.6,1447,0,1421.9,0,1392.9V321.4 c0-29,10.6-54.1,31.8-75.3s46.3-31.8,75.3-31.8h107.2v-80.4c0-36.8,13.1-68.4,39.3-94.6S311.4,0,348.3,0h53.6 c36.8,0,68.4,13.1,94.6,39.3c26.2,26.2,39.3,57.8,39.3,94.6v80.4h321.5v-80.4c0-36.8,13.1-68.4,39.3-94.6 C922.9,13.1,954.4,0,991.3,0h53.6c36.8,0,68.4,13.1,94.6,39.3s39.3,57.8,39.3,94.6v80.4H1286c29,0,54.1,10.6,75.3,31.8 C1382.5,267.3,1393.1,292.4,1393.1,321.4z"/></svg>');
    background-repeat: no-repeat;
    flex-shrink: 0;
    height: 28px;
    margin-top: var(--space-1);
    width: 27px;
  }
   .mobile { display:none;} 
    @media (max-width: 900px) {
      .desktop { display:none;}
      .mobile { display:block;}
	}
    
  </style>
</head>
<body>

  <div class="desktop">
    <h1>
      Desktop date picker
    </h1>
    <amp-date-picker
    id="src-picker-desktop"
    type="single"
    mode="overlay"
    layout="container"
    format="YYYY-MM-DD"
    number-of-months="2"
    src="https://ampbyexample.com/json/amp-date-picker.json"
    input-selector="#src-input-desktop"
    class="example-picker space-between">
    <input id="src-input-desktop" placeholder="Pick a date">
    <button on="tap: src-picker-desktop.clear">Clear</button>
    <template type="amp-mustache" date-template id="spooky">
      <span>🙀</span>
    </template>
  </amp-date-picker>
  </div>
  <div class="mobile">
    <h1>
      Mobile date picker
    </h1>
    <amp-date-picker
    id="src-picker-mobile"
    type="single"
    mode="overlay"
    layout="container"
    format="YYYY-MM-DD"
    src="https://ampbyexample.com/json/amp-date-picker.json"
    input-selector="#src-input-mobile"
    class="example-picker space-between">
    <input id="src-input-mobile" placeholder="Pick a date">
    <button on="tap: src-picker-mobile.clear">Clear</button>
    <template type="amp-mustache" date-template id="spooky">
      <span>🙀</span>
    </template>
  </amp-date-picker>
  </div>
  

</body>
</html>

Комментарии:

1. Это хорошая идея — но мы используем около 8 средств выбора даты на этой странице, и это привело бы к 16 средствам выбора даты, также это будет сложной отладкой… Но хорошая идея