Cara Membuat Check-In Check-Out Kalender di HTML

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.

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

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.

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:

Copy Code


<div class="book-calender-inner">
	<input type="text" name="calender-book">
</div>

Setelah itu yang perlu kita lakukan adalah menambah kode javascript, untuk menampilkan kalender,kodenya seperti berikut:

Copy Code


const monthNames = ["Jan", "Feb", "March", "April", "May", "June","July", "Aug", "Sep", "Oct", "Nov", "Dec"];
let dateObj = new Date();
let month = dateObj.getMonth() + 1;
let monthName = monthNames[month];
let day = dateObj.getDate();
let year = dateObj.getFullYear();

$('input[name="calender-book"]').daterangepicker({
    showDropdowns: false,
    startDate: `${month}/${day}/${year}`,
    endDate: `${month}/${day}/${year}`,
    locale: {
    monthNames: moment.months()
    }
});

Penjelasan dari kode kode diatas:

monthNames = kumpulan nama nama bulan berupa Array
dateObj = inisialisasi object Date
month = mereturn bulan sekarang yang berupa angka
monthName = mereturn bulan sekarang yang berupa nama bulan
day = mereturn tanggal hari ini
year = mereturn tahun ini

Sisanya adalah kode bawaan daterangepicker,untuk lebih jelasnya ada di dokumentasi daterangepicker.

Hasilnya akan terlihat seperti gambar diatas, lalu bagaimana caranya untuk mengambil value startDate dan endDate. Kita hanya perlu menambahkan beberapa kode berikut:

Copy Code


$('input[name="calender-book"]').on('apply.daterangepicker', function(e, picker) {
      let startDate = picker.startDate.format('DD');
      let startMonthNumber = picker.startDate.format('MM');
      let startYear = picker.startDate.format('YYYY');
      let endDate = picker.endDate.format('DD');
      let endMonthNumber = picker.endDate.format('MM')
      let endYear = picker.endDate.format('YYYY');

console.log(`checkin: ${startDate}/${startMonthNumber}/${startYear} checkout: ${endDate}/${endMonthNumber}/${endYear}`);
});

Penjelasan kode diatas:

startDate = mengambil value startDate yang berupa tanggal
startMonthNumber = mengambil value startDate yang berupa bulan(dalam bentuk angka)
startYear = mengambil value startDate yang berupa tahun
endDate,endMonthNumber,dan endYear = sama seperti startDate,startMonthNumber dan startYear hanya saja dari value endDate

console.log di atas akan menampilkan hasil seperti berikut:

Value seperti di console sudah bisa digunakan, karena tampilannya sangat biasa, kita bisa rombak kodenya untuk mempercantik tampilannya. Dengan menambahkan dua buah div untuk menampilkan tanggal check-in dan tanggal check-out,dan juga menyembunyikan inputnya. Yang kira-kira akan seperti ini tampilannya:

Berikut kode yang sudah dirombak:
HTML markup:

Copy Code


<div class="book-calender">
     <div class="book-calender-inner">
        <input type="text" name="calender-book">
        <div class="calender-item">
           <div class="calender-item-text">
              <p>Check In</p>
              <h3 class="check-in-date">29 Sep 2021</h3>
           </div>
           <div class="calender-item-icon">
              <i class="fas fa-calendar-alt"></i>
           </div>
        </div>
        <div class="calender-item">
           <div class="calender-item-text">
              <p>Check Out</p>
              <h3 class="check-out-date">29 Sep 2021</h3>
           </div>
           <div class="calender-item-icon">
           <i class="fas fa-calendar-alt"></i>
           </div>
        </div>
     </div>
</div>

Css kode:

Copy Code


.book-calender {
  padding: 40px 40px;
  background-color: #ffffff;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.book-calender.calender-show {
  max-height: 100%;
  transition: all 0.3s ease;
}

.book-calender input {
  position: absolute;
  top: 100%;
  left: -40px;
  width: 100%;
  visibility: hidden;
  height: 0;
  pointer-events: none;
}

.book-calender-inner {
  position: relative; 
  display: flex;

  justify-content: space-between;
  gap: 30px;
}

.book-calender-inner::before {
  content: "";
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 6.65px 0.35px rgba(1, 2, 2, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background-image: url('img/arrow-right.png');
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 50% 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: 10;
}

.calender-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-width: 2px;
  border-color: rgb(235, 235, 235);
  border-style: solid;
  border-radius: 10px;
  padding: 0 35px;
  height: 100px;
  cursor: pointer;
  width: 50%;
}

.calender-item-text p {
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  margin: 0;
}

.calender-item-text h3 {
  font-family: 'Quicksand';
  font-size: 23px;
  line-height: 30px;
  margin: 0;
}

.calender-item-icon i {
  font-size: 25px;
}

.daterangepicker {
  width: 607px !important;
  border: none !important;
  padding: 0 40px 40px !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.daterangepicker.show-calendar .drp-calendar {
  width: 45% !important;
  max-width: 100%;
}

.daterangepicker .drp-calendar.left .calendar-table {
  padding-right: 0 !important;
}

.daterangepicker:before, .daterangepicker:after {
  display: none !important;
}

.daterangepicker .calendar-table thead tr:first-child th {
  border-bottom: 1px solid #000000;
  padding: 10px 0;
  font-size: 14px;
  font-family: 'Quicksand';
  font-weight: 600;
}

.daterangepicker .calendar-table thead tr:last-child th {
  padding-top: 15px;
  color: #119e91;
}

.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
  padding: 8px 15px 15px 15px !important;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  font-family: 'Quicksand';
}

.daterangepicker .calendar-table td {
  font-weight: 600 !important;
  line-height: 35px !important;
  border-radius: 50% !important;
  border: none !important;
}

.daterangepicker td.active, 
.daterangepicker td.end-date.in-range,
.daterangepicker td.active:hover {
  position: relative;
  color: #000000 !important;
  background-color: transparent !important;
  z-index: 10;
}

.daterangepicker td.in-range {
  background-color: rgba(70, 217, 203, 0.4) !important;
  border-radius: 0 !important;
}

.daterangepicker td.active.start-date::before, 
.daterangepicker td.end-date.in-range::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #46d9cb;
  z-index: -1;
  border-radius: 50%;
}

.daterangepicker td.active::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(70, 217, 203, 0.4);
  z-index: -2;
}

.daterangepicker td.end-date.in-range::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(70, 217, 203, 0.4);
  z-index: -2;
}

.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
  border-width: 0 1px 1px 0 !important;
}

.daterangepicker .drp-selected {
  font-family: 'Quicksand';
  font-weight: 600;
}

.daterangepicker .drp-buttons .btn {
  background-color: #119e91;
  color: #ffff;
  border-radius: 10px;
  padding: 4px 10px !important;
}

.daterangepicker .drp-buttons .btn:hover {
  background-color: #12857a;
}

JS kode:

Copy Code


const monthNames = ["Jan", "Feb", "March", "April", "May", "June",
      "July", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
    let dateObj = new Date();
    let month = dateObj.getMonth() + 1;
    let monthName = monthNames[month];
    let day = dateObj.getDate();
    let year = dateObj.getFullYear();

    let newDate = `${day} ${monthName} ${year}`;
    let checkOut = `${day} ${monthName} ${year}`;
    $('.check-in-date').text(newDate);
    $('.check-out-date').text(checkOut);

    $('.calender-item').on('click', function() {
      $('input[name="calender-book"]').trigger('click');
    });

    $('input[name="calender-book"]').daterangepicker({
        showDropdowns: false,
        startDate: `${month}/${day}/${year}`,
        endDate: `${month}/${day}/${year}`,
        locale: {
          monthNames: moment.months()
        }
    });

    $('input[name="calender-book"]').on('apply.daterangepicker', function(e, picker) {
      let startDate = picker.startDate.format('DD');
      let startMonthNumber = picker.startDate.format('MM');
      let startYear = picker.startDate.format('YYYY');
      let endDate = picker.endDate.format('DD');
      let endMonthNumber = picker.endDate.format('MM')
      let endYear = picker.endDate.format('YYYY');

      if(startMonthNumber.indexOf('0') === '1' ) {
        startMonthNumber = startMonthNumber.replace('0', '');
      } else {
        startMonthNumber = startMonthNumber;
      }

      if(endMonthNumber.indexOf('0') === '1') {
        endMonthNumber = endMonthNumber.replace('0', '');
      } else {
        endMonthNumber = endMonthNumber
      }

      let startMonth = monthNames[startMonthNumber - 1];
      let endMonth = monthNames[endMonthNumber - 1];
      let checkInDate = `${startDate} ${startMonth} ${startYear}`;
      let checkOutDate = `${endDate} ${endMonth} ${endYear}`;

      $('.check-in-date').text(checkInDate);
      $('.check-out-date').text(checkOutDate);
    });