時間の入力インタフェースは意外と古くさくて面倒な場合が多いです。日付はカレンダーで入力できるのに、時間はドロップダウンでいちいち選択しないといけません。テキストで入れる場合も数字のみしか入力できないようにしなければならないでしょう。 そんな時間入力インタフェースとして作られたのがReact Timekeeperです。Google Keepアプリにインスパイアされたソフトウェアです。

React Timekeeperの使い方

入力は二段階に分かれています。まず時を設定します。

次に分を設定します。

AM/PMの切り替えも簡単です。

React Timekeeperは時と分の入力を分けたことで、最初は12分割、次に60分割の表示に分かれる設計になっています。デスクトップではちょっと面倒かも知れませんが、スマートフォンでは入力しやすいでしょう。何よりUIを工夫しているはずのGoogleが提供しているものを模している点が使いやすさにつながるはずです。

React TimekeeperはJavaScript/React製のオープンソース・ソフトウェア(MIT License)です。

React Timekeeper catc/react-timekeeper: Google Keep app inspired time picker for react