Google AMP - Sélecteur de dates
AMP Datepicker est un composant amp qui affiche le calendrier sur la page dans laquelle l'utilisateur peut sélectionner des dates. Le sélecteur de date AMP peut être affiché comme un calendrier statique ou basé sur la sélection d'entrée, c'est-à-dire avec un clic sur un bouton.
Pour faire fonctionner amp-date-picker, nous devons ajouter le script suivant à la page -
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
Balise amp-date-picker
La balise de amp-date-picker ressemble à ceci:
<amp-date-picker layout = "fixed-height" height = "360"></amp-date-picker>
Attributs pris en charge
Les attributs suivants sont pris en charge pour amp-date-picker -
Sr.Non | Attribut et description |
---|---|
1 | mode Les options disponibles sont statiques et superposées. Pour les statiques, le calendrier s'ouvrira par défaut sur la page. Pour Overlay, le calendrier s'ouvrira lors de l'interaction. |
2 | mode Les options disponibles sont simples et par plage. Avec single, vous ne pouvez sélectionner qu'une seule date sur le calendrier. Avec la plage, vous pouvez sélectionner plus d'une date mais dans une plage continue. |
3 | input-selector Cela peut être un sélecteur de requête pour la saisie de la date. Par exemple, pour id is est #nameoftheid pour la classe c'est. nomde la classe. La date sera mise à jour pour la balise à laquelle l'ID est attribué. |
4 | start-input-selector Cela peut être un sélecteur de requête pour la saisie de la date. Par exemple, pour id is est #nameoftheid pour la classe c'est .nameoftheclass. La date sera mise à jour pour la balise à laquelle l'ID est attribué. |
5 | end-input-selector Cela peut être un sélecteur de requête pour la saisie de la date. Par exemple, pour id is est #nameoftheid pour la classe c'est .nameoftheclass. La date sera mise à jour pour la balise à laquelle l'ID est attribué. |
6 | min La date la plus ancienne que l'utilisateur peut sélectionner. Celle-ci doit être formatée en tant que date ISO 8601. Si aucun attribut min n'est présent, la date actuelle sera la date minimale. |
sept | max La dernière date que l'utilisateur peut sélectionner. Celle-ci doit être formatée en tant que date ISO 8601. Si aucun attribut max n'est présent, le sélecteur de date n'aura pas de date maximale. |
8 | month-format Le format du mois dont vous avez besoin pour afficher la date sélectionnée. Par défaut, les valeurs sont "MMMM YYYY" |
9 | format Le format dans lequel vous voulez que la date s'affiche dans la zone de saisie ou dans tout élément HTML dont le sélecteur est utilisé. Par défaut, il s'agit de "AAAA-MM-JJ" |
dix | week-day-format Format pour afficher le jour de la semaine. |
11 | locale Paramètres régionaux pour afficher la vue du calendrier. Par défaut, c'est en. |
12 | minimum-nights Le nombre de nuits que l'utilisateur doit sélectionner dans une plage de dates. La valeur par défaut est "1". Une valeur de «0» permet aux utilisateurs de sélectionner la même date pour les dates de début et de fin. |
13 | number-of-months Le nombre de mois à afficher à la fois dans la vue du calendrier. La valeur par défaut est "1". |
14 | first-day-of-week Le jour à spécifier comme premier jour de la semaine (0-6). La valeur par défaut est "0" (dimanche). |
15 | day-size La taille en px des cellules de date dans le tableau d'affichage du calendrier. La valeur par défaut est 39. |
Les principaux attributs sont type et mode. Pourmode, nous avons static et overlaycalendriers de type. Pourtype nous pouvons avoir single et rangeoptions. Avectype = ”single” nous ne pouvons sélectionner qu'une seule date dans le calendrier et pour type = ”range” nous pouvons sélectionner plusieurs données dans une plage.
Maintenant, laissez-nous comprendre amp-date-picker pour les calendriers statiques et de type superposition à travers quelques exemples de travail.
Sélecteur de date AMP statique
Pour le sélecteur de date de type statique, nous devons spécifier le mode = statique, comme indiqué dans l'exemple ci-dessous.
Exemple
<!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-metadata.html">
<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>
Notez que dans cet exemple, nous affichons le calendrier, c'est-à-dire le sélecteur de date par défaut sur l'écran.
La date sélectionnée par l'utilisateur est affichée dans le champ de texte comme indiqué dans l'écran de démonstration illustré ci-dessous -
Production
![](https://assets.edu.lat/google_amp/images/amp_datepicker_single.jpg)
Comment obtenir la date sélectionnée dans amp-date-picker?
Si vous vérifiez l'exemple ci-dessus, il existe un attribut appelé input-selectorqui reçoit l'identifiant du champ de texte. Lorsque l'utilisateur sélectionne la date, elle est affichée dans le champ de saisie.
<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>
Vous pouvez également attribuer la propriété name à l'attribut input-selector comme suit -
<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>
Au cas où si le sélecteur d'entrée n'est pas donné, amp-date-picker crée un champ d'entrée masqué et lui donne le nom date or ${id}-date en utilisant l'identifiant du sélecteur amp-date.
Nous discuterons d'autres exemples avec différents attributs disponibles avec le sélecteur de date. Dans ce qui précède, nous pouvons sélectionner la date unique comme nous l'avons mentionnétype=”single”et mode comme statique. Nous pouvons également sélectionner une plage de dates en donnant le type commetype=”range”.
Exemple
<!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-metadata.html">
<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>
Production
La sortie du code ci-dessus est comme indiqué ci-dessous -
![](https://assets.edu.lat/google_amp/images/amp_datepicker_range.jpg)
How to get the start and end date using type= ”range” selected from amp-date-picker?
Pour obtenir la date de début et de fin, nous avons utilisé l'attribut amp-date-picker start-input-selector et end-input-selector.
Les détails de la syntaxe sont affichés ici -
<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>
Les deux sélecteurs ont un identifiant de champ de saisie où nous voulons que la date de début et de fin soit affichée. Vous pouvez également donner le nom du champ de saisie comme indiqué ici.
Sélecteur de date de superposition AMP
Pour le sélecteur de date du mode Superposition, le calendrier s'affiche en réponse au champ de saisie. Nous pouvons avoir une superposition avec type = "single" et type = "range" comme nous l'avons vu pour le sélecteur de date statique.
Voyons maintenant un exemple fonctionnel de sélection de la plage de dates pour le sélecteur de dates de type Overlay.
Exemple
<!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-metadata.html">
<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>
Production
La sortie du code ci-dessus est comme indiqué ci-dessous -
![](https://assets.edu.lat/google_amp/images/amp_datepicker_multi_select.jpg)
Nous avons déjà vu comment obtenir la date de début et de fin. Notez que nous avons utilisé un autre attribut iciopen-after-select. Cet attribut gardera la superposition ouverte après la sélection. Si vous cliquez en dehors du sélecteur de date, il sera fermé. Il y a aussi un bouton ajouté appelé clear. En cliquant sur le bouton Effacer, les dates sélectionnées seront effacées.La syntaxe pour effectuer ceci est la suivante -
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
Clear
</button>
Pour ajouter un événement, nous devons utiliser onattribut. De plus amples détails sur les événements seront discutés dans leEventsChapitre de ce tutoriel. Nous avons utilisé le comportement de la balise et pour que l'identifiant du datepicker soit donné et l'événement clear, qui s'occupe d'effacer la plage de dates sélectionnée.
Voyons ensuite comment utiliser amp-date-picker comme lightbox.
Sélecteur de dates AMP Lightbox
Le sélecteur de date peut être utilisé dans une fenêtre modale. Nous pouvons également utiliser le sélecteur de date lightbox pour la même chose. Comprenons cela à l'aide d'un exemple concret.
Pour utiliser le sélecteur de date dans la lightbox, nous devons ajouter le script light-box comme indiqué ci-dessous -
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
Exemple
<!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-metadata.html">
<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>
Production
![](https://assets.edu.lat/google_amp/images/amp_datepicker_overlay_select.jpg)
Lorsqu'un utilisateur clique sur le champ de saisie, le sélecteur de date est ouvert à l'intérieur de la lightbox comme indiqué ci-dessous -
![](https://assets.edu.lat/google_amp/images/amp_datepicker_lightbox.jpg)
Pour ce faire, un événement est ajouté dans le champ de saisie comme indiqué ci-dessous -
<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">
Notez que “on” est l'événement qu'il appelle appuyez sur - lightbox.open pour ouvrir la lightbox.
Ici, lightbox est l'identifiant donné à amp-lightbox comme indiqué ci-dessous. Amp-date-picker est appelé à l'intérieur de amp-lightbox et il est activé au toucher des champs de saisie.
<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>