Google-amp-date-picker
提供：Dev Guides
Google AMP-日付の選択
AMP Datepickerは、ユーザーが日付を選択できるページにカレンダーを表示するアンプコンポーネントです。 AMP日付ピッカーは、静的なカレンダーのように表示することも、ボタンをクリックするだけで入力選択に基づいて表示することもできます。
amp-date-pickerを機能させるには、次のスクリプトをページに追加する必要があります-
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>Amp-date-pickerタグ
amp-date-pickerのタグは次のようになります-
<amp-date-picker layout = "fixed-height" height = "360"></amp-date-picker>サポートされる属性
amp-date-pickerでは次の属性がサポートされています-
| Sr.No | Attribute & Description |
|---|---|
| 1 |
mode 利用可能なオプションは、静的およびオーバーレイです。 静的の場合、カレンダーはページでデフォルトで開きます。 オーバーレイの場合、対話時にカレンダーが開きます。 |
| 2 |
mode 利用可能なオプションは、単一および範囲です。 シングルでは、カレンダーで日付を1つだけ選択できます。 範囲を使用すると、連続範囲内で複数の日付を選択できます。 |
| 3 |
input-selector これは、日付入力のqueryselectorにすることができます。 たとえば、idの場合は#nameoftheidのクラスです。 クラスの名前。 IDが割り当てられているタグの日付が更新されます。 |
| 4 |
start-input-selector これは、日付入力のqueryselectorにすることができます。 たとえば、idが#nameoftheidの場合、クラスは.nameoftheclassです。 IDが割り当てられているタグの日付が更新されます。 |
| 5 |
end-input-selector これは、日付入力のqueryselectorにすることができます。 たとえば、idは#nameoftheidで、クラスは.nameoftheclassです。 IDが割り当てられているタグの日付が更新されます。 |
| 6 |
min ユーザーが選択できる最も早い日付。 これはISO 8601日付としてフォーマットする必要があります。 min属性が存在しない場合、現在の日付が最小日付になります。 |
| 7 |
max ユーザーが選択できる最新の日付。 これはISO 8601日付としてフォーマットする必要があります。 max属性が存在しない場合、日付ピッカーには最大日付がありません。 |
| 8 |
month-format 選択した日付を表示するために必要な月形式。 デフォルトでは、値は「MMMM YYYY」です |
| 9 |
format 入力ボックスまたはセレクターが使用されるhtmlelementに日付を表示する形式。 デフォルトでは「YYYY-MM-DD」です |
| 10 |
week-day-format 曜日を表示する形式。 |
| 11 |
locale カレンダービューを表示するロケール。 デフォルトではenです。 |
| 12 |
minimum-nights ユーザーが日付範囲で選択する必要がある夜の数。 デフォルトは「1」です。 値が「0」の場合、ユーザーは開始日と終了日に同じ日付を選択できます。 |
| 13 |
number-of-months カレンダービューに一度に表示する月数。 デフォルトは「1」です。 |
| 14 |
first-day-of-week 週の最初の日として指定する日（0〜6）。 デフォルト値は「0」（日曜日）です。 |
| 15 |
day-size カレンダービューテーブルの日付セルのピクセル単位のサイズ。 デフォルトは39です。 |
主な属性は type と mode です。 mode には、 static および overlay タイプのカレンダーがあります。 type には、 single および range オプションがあります。 type =” single” の場合、カレンダーから日付を1つだけ選択でき、 type =” range” の場合、範囲内の複数のデータを選択できます。
次に、いくつかの実際の例を使用して、静的およびオーバーレイ型のカレンダーのamp-date-pickerを理解しましょう。
AMP静的日付ピッカー
静的型の日付ピッカーの場合、次の例に示すようにmode = staticを指定する必要があります。
例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadatal">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
<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 custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px
solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;display: inline-block;
}
.col-label {
float: left;width: 25%;margin-top: 6px;
}
.col-content {
float: left;width: 75%;margin-top: 6px;
}
.row:after {
content: "";display: table;clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker using type = single</h3>
<amp-date-picker
id = "static-date"
type = "single"
mode = "static"
layout = "fixed-height"
height = "600"
format = "YYYY-MM-DD"
input-selector = "#date">
<div class = "row">
<div class = "col-label">
<label for = "start">
Date is:
</label>
</div>
<div class = "col-content">
<input type = "text" id = "date" name = "date"
placeholder = "Date Selected Is...">
</div>
</div>
</amp-date-picker>
<div>
</body>
</html>この例では、カレンダーを表示していることに注意してください。つまり、デフォルトで日付ピッカーが画面に表示されています。
ユーザーが選択した日付は、以下に示すデモ画面に示すようにテキストフィールドに表示されます-
出力
amp-date-pickerから選択した日付を取得する方法は？
上記の例をチェックすると、テキストフィールドのIDが指定された input-selector という属性があります。 ユーザーが日付を選択すると、入力フィールド内に表示されます。
<amp-date-picker
id = "static-date"
type = "single"
mode = "static"
layout = "fixed-height"
height = "600"
format = "YYYY-MM-DD"
input-selector = "#date"
<div class = "row">
<div class = "col-label">
<label for = "start">Date is:</label>
</div>
<div class = "col-content">
<input type = "text" id = "date" name = "date"
placeholder = "Date Selected Is...">
</div>
</div>
</amp-date-picker>また、次のように入力プロパティに名前プロパティを与えることができます-
<amp-date-picker
type = "single"
mode = "static"
layout = "container"
input-selector = "[name = date]">
<input type = "text" id = "date" name = "date" placeholder = "Date Selected Is...">
</amp-date-picker>input-selectorが指定されていない場合、amp-date-pickerは非表示の入力フィールドを作成し、amp-dateピッカーのIDを使用して dateまたは$ \ {id} -date の名前を付けます。
日付ピッカーで使用可能なさまざまな属性を持ついくつかの例を説明します。 上記では、 type =” single” およびmodeをstaticとして述べたように、単一の日付を選択できます。 タイプを type =” range” として指定することにより、日付の範囲を選択することもできます。
例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadatal">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
<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 custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {padding: 12px 12px 12px 0;display: inline-block;}
.col-label {float: left;width: 25%;margin-top: 6px;}
.col-content {float: left;width: 75%;margin-top: 6px;}
.row:after {content: "";display: table;clear: both;}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;
}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Static Multi Select Dates using type = range</h3>
<amp-date-picker
id = "static-date"
type = "range"
mode = "static"
layout = "fixed-height"
height = "600"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
input-selector = "#static-date-input">
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "start"
name = "start" placeholder = "Start Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "end"
name = "end" placeholder = "End Date">
</div>
</div>
</amp-date-picker>
</div>
</body>
</html>出力
上記のコードの出力は以下のとおりです-
- amp-date-pickerから選択したtype =” range”を使用して開始日と終了日を取得する方法？*
開始日と終了日を取得するために、amp-date-picker属性 start-input-selector および end-input-selector を使用しました。
構文の詳細はここに示されています-
<amp-date-picker
id = "static-date"
type = "range"
mode = "static"
layout = "fixed-height"
height = "600"
start-input-selector = "#start"
end-input-selector="#end"
format = "YYYY-MM-DD"
input-selector = "#static-date-input">
<input type = "text" id = "start" name = "start" placeholder="Start Date">
<input type = "text" id = "end" name = "end" placeholder = "End Date">
</amp-date-picker>両方のセレクターには、開始日と終了日を表示する入力フィールドIDがあります。 ここで説明したように、入力フィールドの名前を指定することもできます。
AMPオーバーレイ日付ピッカー
オーバーレイモードの日付ピッカーの場合、カレンダーは入力フィールドに応じて表示されます。 静的な日付ピッカーで見たように、type =” single”およびtype =” range”でオーバーレイすることができます。
オーバーレイタイプの日付ピッカーの日付範囲を選択する実際の例を見てみましょう。
例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<itle>Google AMP - Amp Date-Picker Static</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadatal">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<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 custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type=text]{
width: 50%;
padding: 12px;border:
1px solid #ccc;
border-radius: 4px;resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {float: left;width: 25%;margin-top: 6px;}
.col-content {float: left;width: 75%;margin-top: 6px;}
.row:after {content: "";display: table;clear: both;}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
button { background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = rangelt;/h3>
<amp-date-picker id = "overlay-date"
type = "range"
mode = "overlay"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
open-after-select
input-selector = "#start">
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:lt;/label>
</div>
<div class = "col-content">
<input type = "text" id = "start"
name = "start" placeholder = "Start Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:lt;/label>
</div>
<div class = "col-content">
<input type = "text" id="end" name = "end"
placeholder = "End Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
</div>
<div class = "col-content">
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
Clear
</button>
</div>
</div>
</amp-date-picker>
</div>
</body>
</html>出力
上記のコードの出力は以下のとおりです-
開始日と終了日を取得する方法は既に説明しました。 ここでもう1つ属性 select-after-select を使用したことに注意してください。 この属性は、選択後にオーバーレイを開いたままにします。 日付ピッカーの外側をクリックすると、閉じられます。 クリアと呼ばれるボタンも追加されています。 クリアボタンのクリックで選択された日付がクリアされます。これを実行するための構文は次のとおりです-
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
Clear
</button>イベントを追加するには、 on 属性を使用する必要があります。 イベントの詳細については、このチュートリアルの「イベント」の章で説明します。 タグの動作を使用し、datepickerのidが指定され、イベントをクリアします。これにより、選択した日付範囲のクリアが処理されます。
次に、amp-date-pickerをライトボックスとして使用する方法を見てみましょう。
AMPライトボックス日付ピッカー
日付ピッカーは、モーダルウィンドウ内で使用できます。 ライトボックスの日付ピッカーを使用することもできます。 実際の例を使用してこれを理解しましょう。
ライトボックス内で日付ピッカーを使用するには、以下に示すようにライトボックススクリプトを追加する必要があります-
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadatal">
<meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
<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 custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
<script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style>
input[type=text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {
float: left;width: 25%;
margin-top: 6px;
}
.col-content {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
button {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.lightbox {background-color: rgba(100, 100, 100, 0.5);}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = range</h3>
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:</label>
<div>
<div class = "col-content">
<input type = "text" id = "start" name =
"start" placeholder = "Start Date" on = "tap:lightbox.open">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "end" name =
"end" placeholder = "End Date" on = "tap:lightbox.open">
</div>
</div>
<div class = "row">
<div class = "col-label"></div>
<div class = "col-content">
<button class = "ampstart-btn caps" on =
"tap:overlay-date.clear">Clear</button>
</div>
</div>
<amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
<amp-date-picker id = "overlay-date"
type = "range"
layout = "fill"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
on = "activate: lightbox.open;deactivate: lightbox.close">
</amp-date-picker>
</amp-lightbox>
</div>
</body>
</html>出力
ユーザーが入力フィールドをクリックすると、以下に示すように、日付ボックスがライトボックス内で開かれます-
これを実行するには、以下に示すように、入力フィールドにイベントが追加されます-
<input type = "text" id = "start" name = "start"
placeholder = "Start Date" on = "tap:lightbox.open">
<input type = "text" id = "end" name = "end"
placeholder = "End Date" on = "tap:lightbox.open">- 「on」*は、tap-lightbox.openを呼び出してライトボックスを開くイベントです。
ここで、lightboxは、以下に示すようにamp-lightboxに与えられたIDです。 amp-date-pickerはamp-lightbox内で呼び出され、入力フィールドをタップするとアクティブになります。
<amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
<amp-date-picker id = "overlay-date"
type = "range"
layout = "fill"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
on = "activate: lightbox.open;deactivate: lightbox.close">
</amp-date-picker>
</amp-lightbox>
