{"id":8,"date":"2022-05-09T15:00:27","date_gmt":"2022-05-09T15:00:27","guid":{"rendered":"https:\/\/rizkiakmanda.com\/?p=8"},"modified":"2022-05-10T03:52:05","modified_gmt":"2022-05-10T03:52:05","slug":"cara-membuat-check-in-check-out-kalender-di-html","status":"publish","type":"post","link":"https:\/\/rizkiakmanda.com\/?p=8","title":{"rendered":"Cara Membuat Check-In Check-Out Kalender di HTML"},"content":{"rendered":"\r\n

Ketika kita ingin membuat sebuah web hotel, sebisa mungkin kita membuat fitur-fitur yang bisa mempermudah user. Salah satu fitur yang penting adalah fitur booking, dimana fitur ini membutuhkan tanggal check-in dan check-out. Bisa saja tanggal check-in dan check-in kita buat berupa input text, tapi jika seperti itu rasanya kurang mempermudah, karena user harus melihat kalender terlebih dahulu, dan bisa menimbulkan mismatch data. Karena hal tersebut alangkah baiknya kita menampilkan kalender yang tanggalnya bisa dipilih, baik menjadi tanggal check-in ataupun tanggal check-out.<\/p>\r\n\r\n\r\n\r\n

Ada banyak plugin JS untuk menampilkan kalender, tapi saya akan menggunakan daterangepicker js, karena selain menampilkan kalender, plugin ini memiliki fitur daterangepicker <\/em>seperti namanya, fitur ini bisa dimanfaatkan untuk mengambil tanggal check-in dan check-out, dengan cara mengambil value start Date<\/em> dan end Date.<\/em><\/p>\r\n\r\n\r\n\r\n

Cara membuatnya tidak terlalu sulit,pertama kita hanya harus mendownload terlebih dahulu plugin daterangepicker js di websitenya, setelah itu kita hanya tinggal memindahkan file yang kita butuhkan, yaitu daterangepicker.css, daterangepicker.js dan moment.min.js ke folder kerja kita, biasanya saya akan memisahkan antara css dan js ke folder yang berbeda.Css disimpan di folder css sedangkan js disimpan di folder js.Setelah itu tinggal kita import file tadi ke html kita.<\/p>\r\n\r\n\r\n\r\n

Setelah di import semua file tadi, dan pastikan jQuery sudah di import juga, setelah itu kita tinggal membuat sebuah input kosong, sebagai tempat untuk mengambil tanggal dan menampilkan kalender,kira-kira kodenya seperti berikut:<\/p>\r\n

\n\t\t\t
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n <\/div>\n
\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
<\/p>\r\n
<div class=\"book-calender-inner\">\r\n\t<input type=\"text\" name=\"calender-book\">\r\n<\/div><\/pre>\r\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\r\n\r\n\r\n\r\n
Setelah itu yang perlu kita lakukan adalah menambah kode javascript, untuk menampilkan kalender,kodenya seperti berikut:<\/span><\/p>\r\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
<\/p>\r\n
const monthNames = [\"Jan\", \"Feb\", \"March\", \"April\", \"May\", \"June\",\"July\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\r\nlet dateObj = new Date();\r\nlet month = dateObj.getMonth() + 1;\r\nlet monthName = monthNames[month];\r\nlet day = dateObj.getDate();\r\nlet year = dateObj.getFullYear();\r\n\r\n$('input[name=\"calender-book\"]').daterangepicker({\r\n\u00a0 \u00a0 showDropdowns: false,\r\n\u00a0 \u00a0 startDate: `${month}\/${day}\/${year}`,\r\n\u00a0 \u00a0 endDate: `${month}\/${day}\/${year}`,\r\n\u00a0 \u00a0 locale: {\r\n\u00a0 \u00a0 monthNames: moment.months()\r\n\u00a0 \u00a0 }\r\n});<\/pre>\r\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\r\n
Penjelasan dari kode kode diatas:<\/p>\r\n