Project Date Range Picker seperti di Tiket.com

By . Posted on

Kali ini Whitecyber Team kembali mendapatkan order dalam pembuatan Date Time Picker seperti yang digunakan oleh Tiket.com. seperti apa kisah perjalanan dan langkah-langkah pengerjaan projectnya, yuk simak kisahnya sebagai berikut.

Date Range Picker adalah sebuah JavaScript component untuk memilih date ranges, dates dan times.

.

Date Range Picker adalah sebuah komponen yang memungkinkan pengguna untuk memilih rentang tanggal dari sebuah kalender. Date Range Picker biasanya digunakan untuk aplikasi yang membutuhkan filter data berdasarkan periode waktu tertentu, seperti laporan keuangan, analisis statistik, atau reservasi hotel.

Date Range Picker memiliki beberapa fitur yang dapat meningkatkan pengalaman pengguna, seperti:

  • Memilih rentang tanggal dengan cara klik dan drag pada kalender
  • Memilih rentang tanggal yang sudah ditentukan, seperti hari ini, minggu ini, bulan ini, atau tahun ini
  • Memilih rentang tanggal yang relatif, seperti 7 hari terakhir, 30 hari terakhir, atau 90 hari terakhir
  • Memilih rentang tanggal yang kustom, dengan memasukkan tanggal awal dan akhir secara manual
  • Menampilkan preview data yang sesuai dengan rentang tanggal yang dipilih
  • Mengubah format tampilan tanggal sesuai dengan preferensi pengguna

Date Range Picker dapat diimplementasikan dengan menggunakan berbagai library atau framework yang tersedia, seperti jQuery, Bootstrap, React, Angular, atau Vue. Berikut adalah beberapa contoh Date Range Picker yang dapat Anda coba:

Date Range Picker adalah sebuah komponen yang sangat berguna untuk aplikasi yang memerlukan pemilihan rentang tanggal. Dengan menggunakan Date Range Picker, Anda dapat memberikan kemudahan dan fleksibilitas kepada pengguna Anda dalam mengolah data sesuai dengan kebutuhan mereka.

Berikut ini adalah kode dari hasil research tersebut :

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

.

Tambahkan itu di paling atas file kemudian panggil fungsi diatas sesuai dengan apa yang anda mau :

Style 1. Simple

$('input[name="dates"]').daterangepicker();

.

Style 2. Simple Date Range Picker With a Callback

<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});
</script>

.

Style 3. Date Range Picker With Times

<input type="text" name="datetimes" />

<script>
$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
</script>

.

Style 4. Single Date Picker

<input type="text" name="birthday" value="10/24/1984" />

<script>
$(function() {
  $('input[name="birthday"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
    alert("You are " + years + " years old!");
  });
});
</script>

.

Style 5. Predefined Date Ranges

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>

<script type="text/javascript">
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>

.

Style 6. Input Initially Empty

<input type="text" name="datefilter" value="" />

<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>

.

Options

  • startDate (Date or string) The beginning date of the initially selected date range. If you provide a string, it must match the date format string set in your locale setting.
  • endDate: (Date or string) The end date of the initially selected date range.
  • minDate: (Date or string) The earliest date a user may select.
  • maxDate: (Date or string) The latest date a user may select.
  • maxSpan: (object) The maximum span between the selected start and end dates. Check off maxSpan in the configuration generator for an example of how to use this. You can provide any object the moment library would let you add to a date.
  • showDropdowns: (true/false) Show year and month select boxes above calendars to jump to a specific month and year.
  • minYear: (number) The minimum year shown in the dropdowns when showDropdowns is set to true.
  • maxYear: (number) The maximum year shown in the dropdowns when showDropdowns is set to true.
  • showWeekNumbers: (true/false) Show localized week numbers at the start of each week on the calendars.
  • showISOWeekNumbers: (true/false) Show ISO week numbers at the start of each week on the calendars.
  • timePicker: (true/false) Adds select boxes to choose times in addition to dates.
  • timePickerIncrement: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).
  • timePicker24Hour: (true/false) Use 24-hour instead of 12-hour times, removing the AM/PM selection.
  • timePickerSeconds: (true/false) Show seconds in the timePicker.
  • ranges: (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. Click ranges in the configuration generator for examples.
  • showCustomRangeLabel: (true/false) Displays “Custom Range” at the end of the list of predefined ranges, when the ranges option is used. This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.
  • alwaysShowCalendars: (true/false) Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks “Custom Range”. When this option is set to true, the calendars for choosing a custom date range are always shown instead.
  • opens: (‘left’/’right’/’center’) Whether the picker appears aligned to the left, to the right, or centered under the HTML element it’s attached to.
  • drops: (‘down’/’up’/’auto’) Whether the picker appears below (default) or above the HTML element it’s attached to.
  • buttonClasses: (string) CSS class names that will be added to both the apply and cancel buttons.
  • applyButtonClasses: (string) CSS class names that will be added only to the apply button.
  • cancelButtonClasses: (string) CSS class names that will be added only to the cancel button.
  • locale: (object) Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars. Check off locale in the configuration generator to see how to customize these options.
  • singleDatePicker: (true/false) Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.
  • autoApply: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
  • linkedCalendars: (true/false) When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
  • isInvalidDate: (function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.
  • isCustomDate: (function) A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date’s calendar cell.
  • autoUpdateInput: (true/false) Indicates whether the date range picker should automatically update the value of the <input> element it’s attached to at initialization and when the selected dates change.
  • parentEl: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be ‘body’

.

Static website adalah website yang memiliki konten yang tidak berubah atau tetap. Contoh website yang menggunakan jenis ini adalah website resume atau CV. Data yang ditampilkan pada website ini tidak diambil melalui database, melainkan di-hardcode atau sudah ditulis pada suatu file sebelum diunggah ke hosting.

Tapi jangan khawatir, static website pun bisa menjadi dynamic jika kamu menggunakan API (Application Programming Interface) untuk mengambil data dari suatu database atau tempat lain. Namun, di panduan ini hanya akan mengajarkan cara membuat website statis tanpa data dinamis.

Menggunakan Vercel sebagai Hosting

Vercel adalah salah satu penyedia layanan hosting gratis yang akan kita gunakan. Berikut ini adalah langkah-langkah untuk mendaftarkan diri di hosting ini. Selain deploy website di Github, kamu juga bisa buat repository di Vercel ini.

1. Daftarkan Diri

Pertama, kamu harus mendaftarkan diri dulu di Vercel. Untuk dapat mendaftarkan diri kamu harus memiliki akun Github, GitLab, atau BitBucket.

2. Download Aplikasi CLI Vercel

Setelah mendaftarkan diri, download aplikasi CLI Vercel melalui npm. Jika kamu belum melakukan instalasi npm, ada baiknya untuk mengikuti panduan instalasi npm terlebih dahulu. Jalankan perintah berikut ini untuk mengunduh aplikasi CLI Vercel ke komputermu,

Setelah instalasi selesai, coba jalankan perintah npx vercel -v untuk mengetahui apakah instalasi sukses atau tidak. Jika tidak keluar tulisan mirip seperti di bawah ini, kemungkinan instalasimu gagal dan harus diulang.

3. Login Melalui Aplikasi CLI Vercel

Selanjutnya, login ke Vercel menggunakan aplikasi CLI tersebut. Caranya mudah dengan menggunakan perintah npx vercel. Kamu akan disuruh memasukan email yang kamu daftarkan sebelumnya, selanjutkan email konfirmasi akan dikirimkan dan kamu perlu untuk menekan tombol ‘Verify’ di email kamu. Tulisan yang akan keluar kurang lebih seperti ini.

Selamat! Kamu sudah berhasil menggunakan Vercel CLI. Sekarang, saatnya membuat website dan meletakkannya di Vercel sehingga semua orang bisa mengaksesnya. Cukup melakukan dua langkah sederhana berikut ini.

1. Buat Website Super Sederhana

Buat sebuah folder baru, dan isi folder tersebut dengan sebuah file HTML bernama index.html yang isinya bebas

2. Unggah Website Kamu ke Vercel

Kemudian jalan kan perintah berikut ini di folder yang berisi index.html tersebut. Kamu akan ditanya mengenai beberapa hal, kamu boleh tekan enter sampai beres tanpa mengubah apapun.

Yak, kamu berhasil membuat website yang dapat diakses melalui internet! Sekarang coba buka link yang muncul di tulisan diatas tepatnya dibagian, Production:. Coba buka melalui browser dan kamu akan melihat bahwa website kamu berhasil dibuat.

Vercel memiliki dukungan untuk berbagai jenis frontend framework seperti React, NextJS, Angular, dan Vue. Sehingga kamu bisa menggunakan frontend framework pilihan kamu jika dibutuhkan.

Bila sahabat membutuhkan pertolongan atau bantuan tentang pembuatan program, bisa langsung hubungi Customer Service Whitecyber Team.

Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *