Pickatime

by Fairlight

HTML

<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">
<link rel="stylesheet" href="https://rawgit.com/mche/pickadate.js/master/lib/themes/default.date.css">
<script src="pickatime.js"></script>
<!-- <p>
        <input id="timeValue" type="time" placeholder="時刻を選択">
        </p>
 <p> -->

<div id="timeTable">

</div>

CSS

.picker--time  .picker__frame {max-width: 666px}
table.picker__list tr:nth-child(odd) { background-color: #ddd; }
table.picker__list tr td:first-child {font-weight: 700;}
.picker__list-item {
  border: 1px solid #ddd;
  background: none;
 }
.picker__list-item--now:before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 0.5em solid #0059bc;
  border-left: .5em solid transparent;
}
input {width: 100%;}

JavaScript

// $("#timeValue").pickatime();
//$('.timepicker1').pickatime(); */

const makeTimeTable=()=>{
    var tableElement = document.getElementById("timeTable");
    var str="";
    str += "<table id=\"time\" border=\"1\">";
    str += "<tr><td  >time</tr >"
    for (var i = 0; i < 3; i++) {

        str += "<tr>";
        str += "    <td><input class=\"timeValue\" type=\"text\"></td>";
        str += "</tr>";
    }
    str += "</table>";
    tableElement.insertAdjacentHTML('beforeend', str);
}

window.onload = () => {
    	 makeTimeTable();
   $('.timeValue').pickatime();

};