Untuk kali ini kita akan coba membuat sebuah tanggal, seperti yang teman-teman kursus web design private online ketahui walaupun di suatu komputer dan ketika kita melihat sebuah website itu sudah tampil tampilan sebuah tanggal di pojok bawah kanan, tetapi disini saya akan coba membuat sebuah tanggal di website kita, tampilan yang akan kita tampilkan disini itu menurut saya sudah cukup keren, ada beberapa fungsi untuk melihat tampilan tanggalnya cukup keren, seperti apa cara mudah membuat tampilan tanggal jangan kemana-mana simak terus ya teman-teman.
Oke untuk cara membuat tanggal ini saya akan menggunakan sebuah cara dari bootstrap vue di karenakan ada sebuah efek-efek yang keren sekali menurut saya jadi tidak hanya menampilkan tanggal tetapi dengan sebuah tanggal yang di sediakan di bootstrap vue kita akan mendapatkan sebuah tanggal sekarang, lalu tanggal itu bisa kita disabled, jadi hanya bisa dilihat saja, pokoknya ada beberapa efek yang nanti kita dapatkan, caranya cukup mudah yaitu seperti biasa teman-teman harus sudah menginstall bootstrap vuenya ya, untuk cara menginstallnya sudah saya tulis pada artikelnya sebelumnya.
Jika teman-teman sudah menginstallnya biasanya cara ini cukup simple sekali karena di bootstrap vue untuk menampilkan tanggal seperti itu, teman-teman hanya perlu mengetikan <b-calendar> maka teman-teman sudah berhasil menampilkan sebuah tanggalnya, tetapi disni saya akan mencontohkan dari bootstrap vuenya, karena kita akan melihat sebuah efek yang lain, oke langsung saja
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<template> <div> <b-form-group label="Select calendar interactive state"> <b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly"> <b-form-radio value="disabled">Disabled</b-form-radio> <b-form-radio value="readonly">Readonly</b-form-radio> <b-form-radio value="normal">Normal</b-form-radio> </b-form-radio-group> </b-form-group> <b-calendar id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-calendar> </div> </template> <script> export default { data() { return { state: 'disabled' } }, computed: { disabled() { return this.state === 'disabled' }, readonly() { return this.state === 'readonly' } } } </script> |
Jadi ketika kita lihat hasil di atas, kita akan mendapatkan hasil yang pertama adalah sebuah tampilan yang disabled ya, karena di sebuah tag tanggal ada sebuah attribute untuk membuat tanggal itu disabled, readonly atau normalnya, teman-teman kursus web design private online tinggal sesuaikan saja, dan jika kita lihat maka hasilnya akan seperti ini
perbedaan normal dan readonly, bisa teman-teman lihat, ketika teman-teman mengalihkan atau memilih tanggal lain, di tampilan normal akan memberikan sebuah nama hari apa sekarang dan sebuah tanggal, keren bukan teman-teman kursus privat web design online.
Oke saya rasa cukup mudah ya untuk membuat tampilan tanggal, karena bootstrap vue jadi semuanya terasa mudah dan simple, semoga bermanfaat dan sampai jump pada artikel selanjutnya terimakasih.