JavaScript
jQuery
カレンダー
pickadate.js
予約フォーム

pickadate.jsを使ってカッコいい予約フォームを作ってみた(demo有)

pickadate.jsを使って予約フォームを作る

前回datepickerのライブラリpickadate.jsを紹介しました。
UIのイケているdatepickerライブラリpickadate.jsが最高だった(demo有)

pickadate.jsのライブラリを使えば格好いいカレンダー(datepicker)と合わせて、時間選択(timepicker)のライブラリもあるので、日付と時間を指定する予約フォームなどの実装に使えたりします。

僕は勤怠管理のアプリケーションを作り、カレンダーで選択した日付の出勤時間と退勤時間を編集する機能でpickadate.jsのライブラリを使わせてもらっています...:bow_tone2:

pickadate.jsの概要

オフィシャルページ

pickadate.js

pickadate.jsリファレンス

datepickerリファレンス
timepickerリファレンス

使い方・概要は以下の記事にまとめてあります。
UIのイケているdatepickerライブラリpickadate.jsが最高だった(demo有)

オフィシャルページよりファイル群をインストールして、以下のファイルを読み込みます。
予約.jpg

【datepickerイメージ】
スクリーンショット 2018-01-14 11.42.22.png

【timepickerイメージ】
スクリーンショット 2018-01-14 11.41.34.png

pickadate.jsを使った予約ページのデモ

【OK】
予約_OK.gif

【NG】
予約_NG.gif

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pickadate.js demo</title>

<!-- 最新 -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/default.date.css">
<link rel="stylesheet" href="assets/css/default.time.css">
<!-- クラクシック版 -->
<!-- <link rel="stylesheet" href="assets/css/classic.css">
<link rel="stylesheet" href="assets/css/classic.date.css">
<link rel="stylesheet" href="assets/css/classic.time.css"> -->

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="assets/pickadate/picker.js"></script>
<script src="assets/pickadate/picker.date.js"></script>
<script src="assets/pickadate/picker.time.js"></script>
<script src="assets/pickadate/legacy.js"></script>
<script src="assets/pickadate/lang-ja.js"></script>  <!-- 日本語化 -->
<script src="assets/js/main.js"></script>

</head>
<body>
  <section class="section">
    <div class="section__block section__block--scoped">
      <h3>pickadate.js 予約ページdemo</h3>                  
      <fieldset class="fieldset fieldset--demo">
        <div class="fieldset__wrapper">
          <label> ■予約日  </label></br>              
          <input id='date' class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;"></br></br>
          <label> ■予約時間 </label></br>            
          <input id='time' class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;"></br></br>
          <button id="submit" class="fieldset__button button button--small">予約</button>
        </div>    
        <div id="result"></div>      <!-- ボタン押下の結果を表示する -->   
      </fieldset>
    </div>
  </section>
</body>
</html>

main.js
$(function() {

    // datepicker表示イベント
    $('#date').pickadate();

    // timepicker表示イベント
    $('#time').pickatime({
        format: 'HH:i', // 24時間表記
        interval: 30,   // 表示間隔
        min: [10,00],   // 予約開始時間
        max: [20,00]    // 予約終了時間 
    });

    // 予約ボタン押下イベント
    $('#submit').click(onClickSubmit);

    //予約ボタン押下処理
    function onClickSubmit(){
        $('#submit_result').remove();
        var date = $('#date').val();
        var time = $('#time').val();

        if(date!='' && time !=''){

            // TODO 予約をサーバに送信
            // params={};
            // prams.date=date;
            // params.time=time;
            // $.post("hoge.php",params,function(data){
                // ここにサーバ送信後の処理結果を書く
            // });

            //予約完了メッセージ
            $('#result').after('<div id="submit_result" class="section__block section__block--notification"><p><strong>'+date+time+'〜</strong><br>予約受け付けました。</p></div>');            

        }else{
            //予約失敗メッセージ
            $('#result').after('<div id="submit_result" class="section__block section__block--notification-red"><p>予約日・予約時間を選択してください。</p></div>');            
        }
    }

});

デモページ & Github

デモページ

http://tech-portfolio.org/demo/pickadate

Github

https://github.com/FujiyamaYuta/pickadate_booking