bootstrap以外のデザインでtimepickerを作りたい！オリジナルでtimepickerを作成した方法
むっちゃん
本日は1からオリジナルでtime pickerを作成して見ました。本当はBootstrapを使用する予定でしたが動きが理想とする物とは違った為に自作しました。
bootstrapのままで大丈夫ってかたは以下のサイトがおすすめです。
Bootstrap 4でDatetimePickerを使いたい #DatePicker - Qiita
はじめにDelphi + ActiveXで作られた既存Webアプリケーションの仕様違い版を新規作成することになり、この際なので、ASP.NET + Bootstrap 4 で作成することにしました。表…
今から作成するtimepickerはデザインなどはbootstrapを使用しています。
お好みでカスタマイズしていただけます。
スポンサーリンク出来上がりのイメージ
出来上がりのイメージから説明します。
理想の出来上がりイメージは、時計ボタンをクリックで選択範囲を表示。数字をマウススクロールできるようにし、分の表示範囲をクリックした際に選択状態（inputの中に選択した時間を表示）に変化する事です。
上の画像が完成イメージです。デザインに関してはbootstrapから変化がないのでお好きなデザインに変更してみてください。
作り方
HTML、javascript、bootstrap、fontawesomeを使用して作成いたします。
bootstrap
bootstrapは以下のコードを読み込んで使用しています。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
HTML
HTMLのコードは以下になります。
//inputと時計ボタン
<div class="input-group input-group-sm" style="margin:1rem;width:100px">
<input type="text" class="form-control mamTimePicker" id="span1" size="4" />
<div class="btn btn-primary far fa-clock mamTimePicker" style="padding-top: 8px;z-index: 0;" onclick="buttonClick()"></div>
</div>
<span></span>
//時計ボタンを押すと表示される部分
//時の領域
<div style="display:flex;margin:0;padding:0;align-items:center;border:1px solid #CFCFCF;width: 245px;margin-left: 1.5rem;padding:
0.5rem;border-radius: 0.5rem" id="modaltime" hidden="">
<div style="" id="PickH">
<select id="mamTimePickerH" class="form-select" size="8" style="height:185px;font-size:15px;width:80px;margin:1rem">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
</select>
</div>
<div style="width:0px;text-align:center;margin-right: 0.3rem">:</div>
//分の領域
<form style="" id="PickM" name="form1">
<select id="mamTimePickerM" class="form-select" size="8" style="height:185px;font-size:15px;width:80px;margin:1rem"onclick="clickBtn1()">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
<option>49</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>58</option>
<option>59</option>
</select>
</form>
</div>
javascript
JavaScriptのコードは以下になります。
<script type="text/javascript">
//selectした値をinputへ表示、時間を選択すると確定される
function clickBtn1(){
const str1 = document.getElementById("mamTimePickerH").value;
const str2 = document.getElementById("mamTimePickerM").value;
let str = str1 +":"+ str2;
document.getElementById("span1").value = str;
document.getElementById('modaltime').hidden = true;
}
//enter押した時にfunc1の処理
document.body.addEventListener("keydown", (e) => {
if (e.key == "Enter") {
return func1();
}
});
//入力した値をselectで選択、「00:00」の形でinputへ表示する
var func1 =function(){
const str1 = document.getElementById("mamTimePickerH").value;
const str2 = document.getElementById("mamTimePickerM").value;
inp1 = span1.value.substr(0,2);
inp2 = span1.value.substr(2,2);
let inp3 = inp1 +":"+ inp2;
document.getElementById("span1").value = inp3;
document.getElementById('mamTimePickerH').value = inp1;
document.getElementById('mamTimePickerM').value = inp2;
}
//時計ボタンで開け閉め
function buttonClick(){
var hide = document.getElementById('modaltime');
if (hide.hidden == false) {
hide.hidden = true;
}else{
hide.hidden = false;
}
}
</script>
まとめ
フレームワークを使わないでも簡単に作ることが出来ました。
私の作成したtimepickerが参考になれば嬉しいです。
この度はご覧いただきありがとうございました。
