AMP - Datepicker with variable number-of-months

I'm using amp-date-picker component. How can I display a different number of months depending on the screen size. There is the attribute "number-of-months" which can be set, but I need to show one month only on mobile devices while showing two number-of-months next to each other on desktop devices (beyond e.g. 900px). Can I change the number-of-months attribute of amp-date-picker dynamically, preferable via css?

1 answer

  • answered 2019-03-14 06:02 Bachcha Singh

    Can I change the number-of-months attribute of amp-date-picker dynamically, preferable via css? - No

    You can achieve your goal by using CSS media query with trick.

    1. Use two date picker one for desktop and other for mobile
    2. On Desktop hide the Mobile date picker
    3. On Mobile hide the Desktop date picker

    Required 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>
    

    Require CSS

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

    Example Click Here

    <!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>