目次
- 日付入力部品(vuejs-datepicker)
- vuejs-datepickerのインストール
- vuejs-datepickerコンポーネント利用サンプル
- 実行イメージ
- 入力値をDBに更新できるようにするサンプル
- 入力画面で登録しDB更新の実行イメージ
日付入力部品(vuejs-datepicker)
Laravel6.0のViewに日付入力を追加します。
vue.jsのコンポーネント「vuejs-datepicker」を使いみます。
日付を手入力させてチェックするのは、イマイチなので、ちょっとカッコよく「DatePicker」タイプのコンポーネントを使ってみようと思います。
これはBladeの部品としては存在していません。
Vue.jsの「vuejs-datepicker」を使うことにします。
vuejs-datepickerのインストール
まずはvuejs-datepickerのインストールです。
npmを使います。
以下の記事の手順が実行されて、Vue.js・node.jsがインストールされている環境になっている前提ですすめます。
npmコマンドは以下です。
npm install vuejs-datepicker --save
インストールがおわれば、とりあえず動かしてみます。
vuejs-datepickerコンポーネント利用サンプル
自分で作成したコンポーネントと同様に、vuejs-datepickerも、app.jsに追記すれば動かすことができます。
ただ。
app.jsへの追記の仕方が違います。
app.jsへの追記サンプル
前回の自作コンポーネントは「グローバル」に登録する方法でした。
でも、今回の「vuejs-datepicker」は「ローカル」に登録する必要があります。
その違いについては、詳しくは以下に書いてあります。
とりあえず、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: '年' } } });
コンパイル後Viewへ組み込みサンプル
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
そして、前回同様に以下で動かします。
日付フィールドが正常に表示されてます。
デフォルトを当日日付にし、フォーマット変更したのも、ちゃんと反映しています。
日付のところにフォーカスをあてます。
カレンダーが表示されました。
日本語化されてます。
OKですね。
とりあえず、vuejs-datepickerを、Bladeテンプレートに組み込んで併用するというのはできました。
入力値をDBに更新できるようにするサンプル
入力部品としてちゃんと使えるようにします。
上記に加えて
- 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を立ち上げておくのを忘れず・・に。
確認すると、ちゃんと既存データの末尾にカラムが追加されてました。
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を間にはさんでやってます。
試してませんが、実は、日付文字列のまま代入しても更新されるらしいです。
でも、暗黙の変換はどうも気持ち悪いので、上記のようにしてます。
入力画面で登録しDB更新の実行イメージ
ビルトインサーバーを動かします。
php artisan serve
そして、前回同様に以下で動かします。
適当にエラーにならないように入力しました。
登録ボタンを押すと。
OKですね。
DBにちゃんと日付が更新されています。
よしよし。
これで日付入力項目には、「vuejs-datepicker」を使えるようになりました。
今回はこんな感じですかね。
ではでは。