Membuat Time Picker dan Character Counter Dengan Materialize

Halo sobat, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan melanjutkan pembahasan sebelumnya, yang mana pada artikel sebelumnya kita belajar tentang Implementasi Form Input Pada Framework Materialize. Dan pada kesempatan yang baik ini saya akan memberikan tips dan trik tentang bagaimana cara Membuat Time Picker dan Character Counter Dengan Materialize. Yang pada artikel sebelumnya kita sudah belajar tentang membuat date picker, nah kali ini kita akan membuat time picker dimana kita hanya perlu memanggil class nya saja. Kemudain kita juga akan membuat Character Counter yang berfungsi untuk memberikan info kepada user pada saat memasukan data di dalam tag input.

Jika melebihi batas nya maka akan ada notifikasi yaitu ada broder-bottom merahnya. Baik langsung saja kita praktekkan langsung Membuat Time Picker dan Character Counter Dengan Materialize, sebelum kita mulai teman – teman siapkan file materialize nya terlebih dahulu. Kemudian copy script html nya di bawah ini

<form class="col s12">
    <div class="row">
        <div class="input-field col s6">
            <input id="input_text" type="text" data-length="10">
            <label for="input_text">Input text</label>
        </div>
    </div>
</form>

Kemudian masukkan script jQuery nya

$(document).ready(function() {
    $('input#input_text, textarea#textarea1').characterCounter();
});

Kemudian save dan jalankan pada browser nya

Ketika di klik maka ada notivikasi bawah harus di ini maksimal 10

Ketikan isi melebihi 10 digit maka border akan berubah menjadi merah

Selanjutnya kita implementasikan time picker, teman – teman copy script html nya di bawah ini

<div class="row">
  <div class="input-field col s12">
	<input type="text" class="timepicker">
  </div>
</div>

Kemudian tambahkan script jQuery nya

$('.timepicker').pickatime({
    default: 'now',
    fromnow: 0,      
    twelvehour: false,
    donetext: 'OK',
    cleartext: 'Clear',
    canceltext: 'Cancel', 
    autoclose: false, 
    ampmclickable: true, 
    aftershow: function(){} 
  });

Jika sudah save dan refresh pada browsernya, maka hasilnya seperti gambar di bawah ini

Teman – teman bisa atur waktunya dengan memutar arah jarum jam ke angka nya, dengan otomatis akan ke input di dalam tag

Cukup mudah bukan,,??

Sekian pada artikel kali ini tentang Membuat Time Picker dan Character Counter Dengan Materialize dan kita akan berjumpa kembali pada tips dan trik yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

Membuat Time Picker dan Character Counter Dengan Materialize

Kategori