我正在使用amp-date-picker组件。如何根据屏幕尺寸显示不同的月份数。可以设置属性“月数”，但是我只需要在移动设备上显示一个月，而在台式机设备上则显示两个月数（例如超过900像素）。我可以动态更改amp-date-picker的月数属性，最好通过CSS更改吗？
答案 0 :(得分：0)
我可以动态更改amp-date-picker的month-of-months属性，最好通过CSS更改吗？ -否
您可以通过使用带有技巧的CSS媒体查询来实现您的目标。
必需的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>