Dinamik Saat Seçim Kütüphanesi – Timepicker.js

Merhaba. Bu makalemde sizlerle dinamik saat seçim kütüphanesi olan Timepicker.js sınıfının kullanımını anlatacağım.

Timepicker.js istenilen formatta 24 saat dilimine göre seçim yapılabilen, pek çok özelliği kendi bünyesinde barındıran bir kütüphanedir.

Demo linkine buradan ulaşabilirsiniz.

Nasıl Kullanabilirim?

Öncelikle sayfamıza CSS ve javascript dosyalarımızı import edelim.

<link href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"  rel="stylesheet">
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>

1 2	<link href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"> <script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>

Nesnemizi oluşturalım ve özelliklerini tanımlayalım

var timepicker = new TimePicker(['field1', 'field2'], {
  theme: 'dark', // or 'blue-grey'
  lang: 'pt' // 'en', 'pt' for now
});
timepicker.on('change', function(evt){
  console.info(evt);

  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
});

var timepicker = new TimePicker(['field1', 'field2'], {

theme: 'dark', // or 'blue-grey'

lang: 'pt' // 'en', 'pt' for now

});

timepicker.on('change', function(evt){

console.info(evt);

var value = (evt.hour || '00') + ':' + (evt.minute || '00');

evt.element.value = value;

});

Nesne event bilgileri

timepicker.on('open', function(evt){

});

timepicker.on('close', function(evt){

});

timepicker.on('change', function(evt){

  var hour = evt.hour;
  var minute = evt.minute;

});