Google AMP - Selezione data
AMP Datepicker è un componente di amp che visualizza il calendario sulla pagina in cui l'utente può selezionare le date. Il datepicker AMP può essere visualizzato come un calendario statico o in base alla selezione dell'input, ovvero con un clic di un pulsante.
Per far funzionare amp-date-picker dobbiamo aggiungere il seguente script alla pagina:
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>Tag Amp-date-picker
Il tag di amp-date-picker ha il seguente aspetto:
<amp-date-picker layout = "fixed-height" height = "360"></amp-date-picker>Attributi supportati
I seguenti attributi sono supportati per amp-date-picker:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | mode Le opzioni disponibili sono statiche e sovrapposte. Per statico, il calendario si aprirà per impostazione predefinita sulla pagina. Per Overlay, il calendario si aprirà dopo l'interazione. |
| 2 | mode Le opzioni disponibili sono singole e gamma. Con single, puoi selezionare solo una data sul calendario. Con intervallo, puoi selezionare più di una data ma in un intervallo continuo. |
| 3 | input-selector Può essere un selettore di query per l'immissione della data. Ad esempio, per id is è #nameoftheid per class è. nome della classe. La data verrà aggiornata per il tag a cui è assegnato l'id. |
| 4 | start-input-selector Può essere un selettore di query per l'immissione della data. Ad esempio, per id è #nameoftheid per class è .nameoftheclass. La data verrà aggiornata per il tag a cui è assegnato l'id. |
| 5 | end-input-selector Può essere un selettore di query per l'immissione della data. Ad esempio, per id è #nameoftheid per class è .nameoftheclass. La data verrà aggiornata per il tag a cui è assegnato l'id. |
| 6 | min La prima data che l'utente può selezionare. Deve essere formattato come una data ISO 8601. Se non è presente alcun attributo min, la data corrente sarà la data minima. |
| 7 | max L'ultima data che l'utente può selezionare. Deve essere formattato come una data ISO 8601. Se non è presente alcun attributo max, il selettore di date non avrà una data massima. |
| 8 | month-format Il formato del mese necessario per visualizzare la data selezionata. Per impostazione predefinita, i valori sono "MMMM AAAA" |
| 9 | format Il formato in cui si desidera visualizzare la data nella casella di immissione o qualsiasi elemento html di cui viene utilizzato il selettore. Per impostazione predefinita è "AAAA-MM-GG" |
| 10 | week-day-format Formato per visualizzare il giorno della settimana. |
| 11 | locale Impostazioni locali per visualizzare la visualizzazione del calendario. Di default è en. |
| 12 | minimum-nights Il numero di notti che l'utente deve selezionare in un intervallo di date. L'impostazione predefinita è "1". Un valore "0" consente agli utenti di selezionare la stessa data per le date di inizio e di fine. |
| 13 | number-of-months Il numero di mesi da visualizzare contemporaneamente nella vista calendario. L'impostazione predefinita è "1". |
| 14 | first-day-of-week Il giorno da specificare come primo giorno della settimana (0-6). Il valore predefinito è "0" (domenica). |
| 15 | day-size La dimensione in px delle celle della data nella tabella della vista del calendario. L'impostazione predefinita è 39. |
Gli attributi principali sono type e mode. Permode, noi abbiamo static e overlaydigitare calendari. Pertype possiamo avere single e rangeopzioni. Contype = ”single” possiamo selezionare solo una data dal calendario e per type = ”range” possiamo selezionare più di un dato in un intervallo.
Ora, comprendiamo amp-date-picker per calendari di tipo statico e overlay attraverso alcuni esempi di lavoro.
Selezione data statica AMP
Per il selettore di date di tipo statico, dobbiamo specificare mode = static come mostrato nell'esempio seguente.
Esempio
<!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>Si noti che in questo esempio viene visualizzato il calendario, ovvero il datepicker per impostazione predefinita sullo schermo.
La data selezionata dall'utente viene mostrata nel campo di testo come mostrato nella schermata demo mostrata di seguito -
Produzione
Come ottenere la data selezionata da amp-date-picker?
Se controlli l'esempio sopra, c'è un attributo chiamato input-selectora cui viene fornito l'id del campo di testo. Quando l'utente seleziona la data, questa viene mostrata all'interno del campo di input.
<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>Puoi anche dare la proprietà name all'attributo input-selector come segue:
<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>Incase se il selettore di input non viene fornito, amp-date-picker crea un campo di input nascosto e gli assegna un nome di date or ${id}-date utilizzando l'ID del selettore di date.
Discuteremo alcuni altri esempi con diversi attributi disponibili con il selettore di date. In quanto sopra, possiamo selezionare la singola data come accennatotype=”single”e modalità come statico. Possiamo anche selezionare l'intervallo di date dando il tipo cometype=”range”.
Esempio
<!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>Produzione
L'output del codice mostrato sopra è il seguente:
How to get the start and end date using type= ”range” selected from amp-date-picker?
Per ottenere la data di inizio e di fine, abbiamo utilizzato l'attributo amp-date-picker start-input-selector e end-input-selector.
I dettagli della sintassi sono mostrati qui -
<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>Entrambi i selettori hanno l'ID del campo di input in cui si desidera visualizzare la data di inizio e di fine. Puoi anche dare il nome del campo di input come discusso qui.
Selettore data overlay AMP
Per il selettore di date in modalità Sovrapposizione, il calendario viene visualizzato in risposta al campo di immissione. Possiamo avere overlay con type = "single" e type = "range", come abbiamo visto per il selettore di date statico.
Vediamo ora un esempio funzionante di selezione dell'intervallo di date per il selettore di date di tipo Overlay.
Esempio
<!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>Produzione
L'output del codice mostrato sopra è il seguente:
Abbiamo già visto come ottenere la data di inizio e la data di fine. Osserva che abbiamo usato un altro attributo quiopen-after-select. Questo attributo manterrà la sovrapposizione aperta dopo la selezione. Se fai clic fuori dal selettore di date, verrà chiuso. C'è anche un pulsante aggiunto chiamato clear. Facendo clic sul pulsante cancella le date selezionate verranno cancellate. La sintassi per eseguire questa operazione è la seguente:
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
Clear
</button>Per aggiungere un evento, dobbiamo usare onattributo. Ulteriori dettagli sugli eventi saranno discussi nelEventsCapitolo di questo tutorial. Abbiamo utilizzato il comportamento del tag e per questo viene fornito l'id del datepicker e l'evento clear, che si occupa di cancellare l'intervallo di date selezionato.
Successivamente, vediamo come utilizzare amp-date-picker come lightbox.
Selettore data lightbox AMP
Il selettore di date può essere utilizzato all'interno di una finestra modale. Possiamo anche utilizzare il selettore di date lightbox per lo stesso. Cerchiamo di capire questo con l'aiuto di un esempio funzionante.
Per utilizzare il selettore di date all'interno di lightbox, dobbiamo aggiungere lo script light-box come mostrato di seguito -
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>Esempio
<!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>Produzione
Quando un utente fa clic sul campo di input, il selettore di date viene aperto all'interno della lightbox come mostrato di seguito -
Per eseguire ciò, viene aggiunto un evento nel campo di input come mostrato di seguito:
<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">Nota che “on” è l'evento che chiama tap - lightbox.open per aprire il lightbox.
Qui lightbox è l'id dato a amp-lightbox come mostrato di seguito. Amp-date-picker si chiama all'interno di amp-lightbox e si attiva toccando i campi di input.
<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>