GoogleAppsScriptでWeb Apps その４(YubinBango.js)

YubinBango.js

前回の続きです。

GoogleAppsScriptでWeb Apps その３(Bootstrap Datepicker)

Bootstrap Datepicker 前回の続きです。前回は公式のGetting startedページの「Bo...

memordm.com

2018-05-21 16:50

Jumbotron TemplateでBootstrap Datepickerを使用したサンプルにYubinBango.jsを追加します。

YubinBango.jsとは、Webフォームにて郵便番号を入力すると自動的に住所が自動入力されるライブラリです。

junbotron2a.htmlを作成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base target="_top">
    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Bootstrap Datepicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css">
  </head>
  <body>
    <div class="jumbotron">
      <div class="container" style="margin-top:-30px;"> 
        <h2>Bootstrap Datepicker TEST</h2>
        <p>Bootstrap 3.3.7</p>
        <p>Bootstrap Datepicker 1.8.0</p>
        <p>jQuery 3.3.1</p>
        
        <form name="form1" id="form1" class="form-inline">
          <div class="form-group">
            <label for="datepicker1">年月日</label>
            <input type="text" class="form-control datepicker" id="datepicker1" name="datepicker1" value="">
          </div>
          <button type="button" class="btn btn-success" onclick="search();"><span class="glyphicon glyphicon-search">　検索する</span></button>
        </form>
        
        <br>
        
        <form name="form2" id="form2" class="form-inline">
          <div class="form-group">
            <label for="datepicker2">年月　</label>
            <input type="text" class="form-control datepicker" id="datepicker2" name="datepicker2" value="">
          </div>
          <button type="button" class="btn btn-success" onclick="search();"><span class="glyphicon glyphicon-search">　検索する</span></button>
        </form>
        
        <br>
                <p>YubinBango.js</p>
        
        <form name="form3" id="form3" class="form-inline h-adr">
          <span class="p-country-name" style="display:none;">Japan</span>
          <div class="form-group">
            <label for="yubin">〒　</label>
            <input type="text" id="yubin" name="yubin" class="form-control p-postal-code" size="8" maxlength="8"><br>
          </div>
          <div class="form-group">
            <label for="address">住所</label>
            <input type="text" id="address" name="address" class="form-control p-region p-locality p-street-address p-extended-address" size="30" maxlength="30">
          </div>
        </form>
      </div>
    </div>
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- YubinBango -->
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

    <!-- Bootstrap Datepicker -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.ja.min.js"></script>

    <script>
    $(function(){
      $('#datepicker1').datepicker({
        language: "ja",
        autoclose: true
      });
    });
    </script>

    <script>
    $(function(){
      $('#datepicker2').datepicker({
        format: "yyyy/mm",
        language: "ja",
        autoclose: true,
        minViewMode: 'months'
      });
    });
    </script>
  </body>
</html>

以下のURLから表示する