Material TimePicker

by bizamajig

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<div class="materialPicker">
    <div class="timeContainer first">
        <div class="waves-effect waves-light btn pickerButton btnUp">
            <i class="mdi-hardware-keyboard-arrow-up"></i>
        </div>
        <div class="Number">
            00
        </div>
        <div class="waves-effect waves-light btn pickerButton btnDown">
            <i class="mdi-hardware-keyboard-arrow-down"></i>
        </div>
    </div>
    
    <!-- Same structure as above -->
    
    <div class="timeContainer second">
         <div class="waves-effect waves-light btn pickerButton btnUp">
            <i class="mdi-hardware-keyboard-arrow-up"></i>
        </div>
        <div class="Number">
            00
        </div>
        <div class="waves-effect waves-light btn pickerButton btnDown">
            <i class="mdi-hardware-keyboard-arrow-down"></i>
        </div>
    </div>
</div>

CSS

.materialPicker{
  width: 18rem;
}

.Number{
  border: none;
  text-align: center;
  font-size: 6.1rem;
  width: 8.4rem;
}

.pickerButton{
    width:100%;
}

.first{
  float:left;
}
.second{
    float:right;
}

JavaScript

$(".btnUp").click(function(){
   var num = $(this).parent(".timeContainer").find(".Number");
    var val = parseInt($(num).text())
    if(val < 60) //change this if you wan't hour logic
        $(num).text(("0" + (val + 1)).slice(-2));
});

$(".btnDown").click(function(){
    var num = $(this).parent(".timeContainer").find(".Number");
    var val = parseInt($(num).text())
    if(val > 0) //probably you won't change this
        $(num).text(("0" + (val - 1)).slice(-2));
});