amp-date-picker, adalah pemilih tanggal gaya kalender interaktif untuk memasukkan formulir. Dengan komponen ini, pengguna dapat menentukan tanggal atau rentang tanggal unik dengan antarmuka kalender yang membuat proses lebih cepat dan lebih rentan terhadap kesalahan.Masukkan script berikut
Tambahkan komponen amp-date-picker
<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
Masukkan komponen amp-bind untuk mengatur variabel berdasarkan tanggal yang dipilih.
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Ini termasuk komponen amp-mustache untuk menampilkan panel informasi di bawah pemilih tanggal.
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Tambahkan komponen amp-lightbox untuk menampilkan pemilih tanggal dalam tampilan lightbox layar penuh.
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Masukkan komponen amp-form untuk membuat formulir.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Untuk menyesuaikan amp-date-pickerestilo, Anda dapat menggunakan kelas seperti CalendarMonth_caption yang diwarisi dari tanggal reaksi. amp-date-picker juga memperlihatkan kelas-kelas CSS yang dapat Anda gunakan dalam aturan CSS, seperti amp-date-picker-selection, yang diterapkan pada entri tanggal yang sedang diedit pengguna.
Style CSS
<style amp-custom>
.CalendarMonth_caption {
color: #fff;
}
[type="range"] .amp-date-picker-selecting {
border-bottom-color: #b60845;
color: #b60845;
}
.align-content-center,
.align-content-center .amp-date-picker-calendar-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.space-between > * + * {
margin-left: 1em;
}
amp-lightbox {
background: rgba(0, 0, 0, .75);
}
amp-lightbox .align-content-center {
height: 100%;
}
.example-picker {
display: flex;
}
.example-picker[mode="overlay"] {
padding: 1em;
}
.small-button {
font-size: .75em;
line-height: .75em;
margin: .75em;
}
.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: 8px;
width: 27px;
}
</style>
Pemilih tanggal tunggal
amp-date-picker dengan tipe = tunggal dapat digunakan untuk memilih satu tanggal. Anda dapat menggunakan amp-kumis dengan atribut info-template untuk menampilkan panel informasi di bawah kalender, di sini kami menunjukkan tanggal yang baru saja Anda pilih. info-template juga memungkinkan tautan AMP dengan menyediakan variabel-variabel yang telah dibuat dengan AMP.setState. Pengganti diperlukan untuk komponen. Untuk satu tanggal, ini dapat berupa: <input amp-date-placeholder placeholder="Pick a date">. amp-date-picker masukkan tindakan jelas yang dapat dipanggil setelah mengklik tombol untuk menghapus pilihan tanggal; membutuhkan atribut show-clear-date.
Contohnya<amp-date-picker id="simple-date-picker" type="single" mode="overlay" layout="container" on="select:AMP.setState({date1: event.date, dateType1: event.id})" format="YYYY-MM-DD" open-after-select input-selector="[name=date1]" class="example-picker space-between"> <div class="icon-input"></div> <div class="ampstart-input"> <input class="border-none p0" name="date1" placeholder="Pick a date"> </div> <button class="ampstart-btn caps" on="tap: simple-date-picker.clear">Clear</button> <template type="amp-mustache" info-template> <span [text]="date1 != null ? 'You picked ' + date1 + '.' : 'You will see your chosen date here.'">You will see your chosen date here.</span> </template> </amp-date-picker>
Selain itu, Anda juga dapat menggunakan amp-kumis untuk membuat templat untuk penandaan tanggal khusus, seperti ikon alih-alih nomor bulan. Di sini kita menggunakan ikon taco bukan angka bulan dengan frekuensi 2 minggu setiap hari Selasa. Kasus-kasus penggunaan umum dapat berupa tanggal pada bulan di mana harga suatu artikel ditetapkan dalam jumlah tertentu.
Contohnya<amp-date-picker id="simple-date-picker-2" type="single" mode="overlay" layout="container" on="select:AMP.setState({date2: event.date, dateType2: event.id})" locale="en" format="YYYY-MM-DD" open-after-select input-selector="[name=date2]" class="example-picker space-between"> <div class="ampstart-input"> <input class="border-none p0" name="date2" placeholder="Pick a date"> </div> <button class="ampstart-btn caps" on="tap: simple-date-picker-2.clear">Clear</button> <template type="amp-mustache" date-template dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU" id="tacos2"> <span>🌮</span> <span class="taco-tuesday"></span> </template> <template type="amp-mustache" info-template> <span [text]="date2 ? 'You picked ' + date2 + '.' + (dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span> </template> </amp-date-picker>
Pemilih rentang tanggal
amp-date-picker dengan type = range yang dapat Anda gunakan untuk memilih rentang tanggal. Secara default, amp-date-picker menonaktifkan tanggal yang lalu, gunakan atribut min untuk mengaktifkannya.
Contohnya<amp-date-picker type="range" mode="overlay" id="range-date-picker" on=" select: AMP.setState({ dates: event.dates, startDate: event.start, endDate: event.end })" format="YYYY-MM-DD" open-after-select min="2017-10-26" start-input-selector="#range-start" end-input-selector="#range-end" class="example-picker space-between"> <div class="ampstart-input"> <input class="border-none p0" id="range-start" placeholder="Start date"> </div> <div class="ampstart-input"> <input class="border-none p0" id="range-end" placeholder="End date"> </div> <button class="ampstart-btn caps" on="tap:range-date-picker.clear">Clear</button> <template type="amp-mustache" info-template> <span [text]="(startDate && endDate ? 'You picked ' + startDate.date + ' as start date and ' + endDate.date + ' as end date.' : 'You will see your chosen dates here.')"> You will see your chosen dates here. </span> </template> </amp-date-picker>
Konfigurasi Eksternal
Dimungkinkan untuk mengkonfigurasi preferensi amp-date-picker menggunakan json eksternal. Kami menggunakan JSON berikut di URL /json/amp-date-picker.json:
{
"templates": [{
"id": "spooky",
"dates": [
"FREQ=WEEKLY;DTSTART=20180101T160000Z;BYDAY=MO",
"FREQ=YEARLY;DTSTART=20180101T160000Z;WKST=SU;BYMONTH=10;BYMONTHDAY=31",
"FREQ=MONTHLY;DTSTART=20180101T160000Z;WKST=SU;BYDAY=FR;BYMONTHDAY=13"
]
}]
}
Untuk tanggal yang cocok dengan daftar tanggal di gumpalan JSON, templat dengan id = "seram" akan digunakan untuk mewakili hari itu di kalender. Dalam hal ini, tanggal ini adalah Senin, Jumat tanggal 13 dan Halloween.
Contohnya<amp-date-picker id="src-picker" type="single" mode="overlay" layout="container" format="YYYY-MM-DD" src="https://ampbyexample.com/json/amp-date-picker.json" input-selector="#src-input" class="example-picker space-between"> <div class="ampstart-input"> <input class="border-none p0" id="src-input" placeholder="Pick a date"> </div> <button class="ampstart-btn caps" on="tap: src-picker.clear">Clear</button> <template type="amp-mustache" date-template id="spooky"> <span>🙀</span> </template> </amp-date-picker>
Pemilih tanggal statis "Static date picker"
amp-date-picker con mode="static" dapat menampilkan tampilan kalender. Selektor statis dapat digunakan dengan atau tanpa input yang terpasang.
Contohnya<div class="align-content-center"> <amp-date-picker id="static-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD" input-selector="#static-picker-input"> </amp-date-picker> </div>
amp-date-picker mendukung berbagai atribut, misalnya disorot dan diblokir. Temukan daftar lengkap di dokumen resmi. Atribut yang diblokir memungkinkan Anda untuk menentukan daftar yang dipisahkan oleh ruang tanggal ISO 8601 dan RRULE RFC 5545 yang menentukan tanggal yang tidak diizinkan. Atribut yang disorot adalah daftar yang dipisahkan oleh slot tanggal dari ISO 8601 dan RRULE dari RFC 5545 yang menentukan tanggal yang ditampilkan dengan gaya sorotan. Di sini setiap Kamis disorot, sementara setiap akhir pekan diblokir.
Contohnya<div class="align-content-center"> <amp-date-picker id="simple-date-picker-3" type="single" mode="static" layout="fixed-height" height="360" on="select:AMP.setState({date3: event.date ? event.date : ''})" locale="en" format="YYYY-MM-DD" highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH" blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU"> </amp-date-picker> </div>
Jika pemilih tanggal menggunakan type = "range" dan ada tanggal yang diblokir yang bisa menjadi bagian dari rentang, the atributo allow-blocked-dates memungkinkan pengguna untuk memilih rentang yang menyertakan tanggal blackout.
Contohnya<div class="align-content-center"> <amp-date-picker id="simple-date-picker-4" type="range" mode="static" layout="fixed-height" height="360" on="select:AMP.setState({date4: event.date ? event.date : ''})" locale="en" format="YYYY-MM-DD" allow-blocked-ranges highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH" blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU"> </amp-date-picker> </div>
Lightbox date picker
amp-date-picker dapat ditampilkan di dalam lightbox modal. Aktifkan acara membuka lightbox jika pengguna berfokus pada elemen input yang terhubung dari pemilih dan menekan tombol panah bawah. deactivatese aktif ketika pengguna menekan melarikan diri ketika berinteraksi dengan tampilan kalender. Untuk kotak antarmuka sentuh saja, atribut pada = "ketuk: ..." & nbsp; buka pemilih saat pengguna menyentuh entri.
Contohnya<div class="p1"> <p>Choose your travel dates</p> <div class="align-content-center space-between"> <div class="ampstart-input"> <input class="border-none p0" id="lb-start" placeholder="Start date" on="tap:lb.open" role="textbox" tabindex="0"> </div> <div class="ampstart-input"> <input class="border-none p0" id="lb-end" placeholder="End date" on="tap:lb.open" role="textbox" tabindex="0"> </div> <button class="ampstart-btn caps" on="tap:lb-picker.clear">Clear</button> </div> <amp-lightbox id="lb" layout="nodisplay"> <button class="ampstart-btn absolute m1 caps small-button" on="tap:lb.close" tabindex="0">Close</button> <div class="align-content-center"> <amp-date-picker id="lb-picker" type="range" mode="static" layout="fixed-height" height="360" format="MM/DD/YYYY" on="activate: lb.open; deactivate: lb.close;" start-input-selector="#lb-start" end-input-selector="#lb-end"></amp-date-picker> </div> </amp-lightbox> </div>Choose your travel dates
Selector lightbox date picker
amp-date-picker Itu juga dapat ditampilkan sebagai tampilan layar penuh di dalam kotak cahaya. Atribut layar penuh memberi tahu pemilih tanggal untuk mengambil ruang dalam wadahnya dan memungkinkan kontennya untuk menggulir secara vertikal.
Contohnya<div class="p1"> <p>Choose your travel dates</p> <div class="align-content-center space-between"> <div class="ampstart-input"> <input class="border-none p0" id="lb-fullscreen-start" placeholder="Start date" on="tap:lb-fullscreen.open" role="textbox" tabindex="0"> </div> <div class="ampstart-input"> <input class="border-none p0" id="lb-fullscreen-end" placeholder="End date" on="tap:lb-fullscreen.open" role="textbox" tabindex="0"> </div> <button class="ampstart-btn caps" on="tap:lb-fullscreen-picker.clear">Clear</button> </div> <amp-lightbox id="lb-fullscreen" layout="nodisplay" scrollable> <button class="ampstart-btn m1 absolute caps z3 small-button" on="tap:lb-fullscreen.close" tabindex="0">Close</button> <amp-date-picker id="lb-fullscreen-picker" fullscreen layout="fill" mode="static" type="range" number-of-months="12" format="MM/DD/YYYY" on="activate: lb-fullscreen.open; deactivate: lb-fullscreen.close;" start-input-selector="#lb-fullscreen-start" end-input-selector="#lb-fullscreen-end"></amp-date-picker> </amp-lightbox> </div>Choose your travel dates
Pemilih tanggal pada formulir "Date picker in a form"
amp-date-picker Ini terintegrasi dengan formulir AMP. Jika Anda tidak memberikan entri untuk pemilih statis, itu akan membuat entri tersembunyi untuk mengirim formulir.
Contohnya<form method="post" class="p1" action-xhr="/components/amp-form/submit-form-xhr" target="_top"> <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD"> </amp-date-picker> <input type="submit" class="ampstart-btn caps"> <div submit-success> <template type="amp-mustache"> Success! Thanks for trying the <code>amp-form</code> demo! </template> </div> <div submit-error> <template type="amp-mustache"> Error! </template> </div> </form>