"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

はじめてLaravel6.0:日付入力に「vuejs-datepicker」を使う/Windows10

Laravel6.0のViewに日付入力を追加します。

vue.jsのコンポーネント「vuejs-datepicker」を使ってみます。

f:id:arakan_no_boku:20191003220222p:plain

 

はじめに

 

以下の回から続けている入力画面の作成です。

今回は、この画面に新しく日付入力項目を追加します。

日付を手入力させてチェックするのは、イマイチなので、ちょっとカッコよく「DatePicker」タイプのコンポーネントを使ってみようと思います。

これはBladeの部品としては存在していません。

Vue.jsの「vuejs-datepicker」を使うことにします。

 

vuejs-datepickerのインストール

 

まずはvuejs-datepickerのインストールです。

npmを使います。

以下の記事の手順が実行されて、Vue.js・node.jsがインストールされている環境になっている前提ですすめます。

arakan-pgm-ai.hatenablog.com

npmコマンドは以下です。

npm install vuejs-datepicker --save

インストールがおわれば、とりあえず動かしてみます。

 

vuejs-datepickerコンポーネントを動かす

 

自分で作成したコンポーネントと同様に、vuejs-datepickerみたいに、npmでインストールした外部ライブラリも、app.jsに追記すれば動かすことができます。

ただ。

app.jsへの追記の仕方が違います。

前回の自作コンポーネントは「グローバル」に登録する方法でした。

でも、今回の「vuejs-datepicker」は「ローカル」に登録する必要があります。

その違いについては、詳しくは以下に書いてあります。

jp.vuejs.org

とりあえず、app.js内への追記、以下を追加します。

ただ、動かすだけなら、components部分だけでもOKです。

でも、どうせやらないといけないので、カレンダーの日本語化もやってます。

 

resources\js\app.js

mport Datepicker from 'vuejs-datepicker';

const app = new Vue({
    el: '#app',
    components: {
        Datepicker
    },
    data: {
        defaultDate: new Date(),
        DatePickerFormat: 'yyyy-MM-dd',
        ja: {
            language: 'Japanese',
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthsAbbr: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            days: ['日', '月', '火', '水', '木', '金', '土'],
            rtl: false,
            ymd: 'yyyy-MM-dd',
            yearSuffix: '年'
        }
    }
});

この登録ができたら、コンパイルします。

Vue.jsはコンパイルしないと反映してくれませんから。

npm run dev

コンパイルにエラーがないのを確認できたら、Viewに組み込みます。

関係する部分だけを書いておきます。

resources\views\dummy.blade.php 

<div class="form-group row">
   <label for="datepicker" class="col-md-4 col-form-label text-md-right">日付</label>
   <div class="col-md-6"  id="date_picker">
       <Datepicker
          v-model="defaultDate"
          :format="DatePickerFormat"
          :language="ja"
          name="datepicker">
       </Datepicker>
   </div>
</div>

上記を、前回の入力画面に追加します。

これで、とりあえずは動くはずなので、動かしてみます。

ビルトインサーバーを動かします。

php artisan serve

そして、前回同様に以下で動かします。

http://localhost:8000/dummy

日付フィールドが正常に表示されてます。

デフォルトを当日日付にし、フォーマット変更したのも、ちゃんと反映しています。

f:id:arakan_no_boku:20191029235612p:plain

日付のところにフォーカスをあてます。

カレンダーが表示されました。

日本語化されてます。

f:id:arakan_no_boku:20191029235842p:plain

OKですね。

とりあえず、vuejs-datepickerを、Bladeテンプレートに組み込んで併用するというのはできました。

 

入力部品としてちゃんと使えるようにする

入力部品としてちゃんと使えるようにします。

上記に加えて

  • DBテーブルに日付カラムを追加する。
  • DBへの日付の更新を追加する。

をやります。 

今回は、バリデーションはかけません。

datapicker入力を通すことで、正しい日付であることは保証されてますから。

 

DBテーブルに日付カラムを追加する

 

前回マイグレーションして作成した「dummy_items」テーブルに「d_datecol」という項目を追加します。

ここに、datepickerで入力した日付を格納します。

まずは、項目追加のマイグレーションです。

今回はテーブルを新規に作るのではないので、コマンドが少し変わります。

php artisan make:migration add_datecol_to_dummy_items --table=dummy_items

--tableオプションが付きます。

これを実行すると、こんな感じでスケルトンができます。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddDatecolToDummyItems extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('dummy_items', function (Blueprint $table) {
            //
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('dummy_items', function (Blueprint $table) {
            //
        });
    }
}

新規作成の時との違いは、up()の仲が「Schema::table」になっていることです。

新規作成時はここが「Schema::create」でしたから。

ここに日付型のカラム「d_datecol」を追加します。

   public function up()
    {
        Schema::table('dummy_items', function (Blueprint $table) {
            $table->date('d_datecol');
        });
    }

こんな感じに変更して、保存して実行します。

php artisan migrate

実行時にDBを立ち上げておくのを忘れず・・に。

確認すると、ちゃんと既存データの末尾にカラムが追加されてました。

f:id:arakan_no_boku:20191029201756p:plain

 

DBへの日付の更新を追加する。

 

vuejs-datepickerへの入力値を取得するのは簡単です。

v-model="defaultDate" を定義しているので、Vue.jsのデータバインディングの仕組でvalueには入力値が自動的にセットされます。

なので。

Laravelのコントローラクラス内では、<input>なんかのHTML部品と同様に、nameに設定した名称で、データをとりだすことができます。 

コントローラクラスのソースです。 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\DummyItem;

use App\Rules\KanjiName;

use Carbon\Carbon;

class DummyController extends Controller
{
   
    public function store(Request $request)
    {
        
        $request->validate([
            'code' => 'alpha_dash| max:10| min:4',
            'name' => ['min:2', 'max:20', new KanjiName],
            'kana' => 'min:2|max:20|regex:/^[ァ-ヶ]+[  ][ァ-ヶ]+$/u',
        ]);
        
        $code = $request->code;
        $name = $request->name;
        $kana = $request->kana;
        $datepicker = $request->datepicker;
        $dummyItem = new DummyItem;
        $dummyItem->c_code = $code;
        $dummyItem->c_name = $name;
        $dummyItem->c_kana_name = $kana;
        $dummyItem->d_datecol = new Carbon($datepicker);
        $dummyItem->save();
        $msg = "登録プログラムで。「" .$code . " " . $name . " " . $kana . " " . $datepicker . "」を登録しました。";
        return view('dummy', compact(
            'msg'
        ));
        
    }
}

元のコントローラクラスに追記したのは、以下の部分です。 

$datepicker = $request->datepicker;

$dummyItem->d_datecol = new Carbon($datepicker);

だけです。

普通に、$request->datepickerで入力値をとりだしてます。

入力値は日付形式の文字列(例:2019-10-30)なので、Carbonを間にはさんでやってます。

試してませんが、実は、日付文字列のまま代入しても更新されるらしいです。

でも、暗黙の変換はどうも気持ち悪いので、上記のようにしてます。 

 

入力画面で登録をしてみます

 

ビルトインサーバーを動かします。

php artisan serve

そして、前回同様に以下で動かします。

http://localhost:8000/dummy

適当にエラーにならないように入力しました。

f:id:arakan_no_boku:20191030004142p:plain

登録ボタンを押すと。

f:id:arakan_no_boku:20191030004245p:plain

OKですね。

DBにちゃんと日付が更新されています。

f:id:arakan_no_boku:20191030004357p:plain

よしよし。

これで日付入力項目には、「vuejs-datepicker」を使えるようになりました。

今回はこんな感じですかね。

ではでは。