vuejs-datepickerを導入してお手軽に日付選択フォームをカスタマイズ

開発中のRailsアプリに日付入力フォームを実装していて、
デフォルトのフォームだと使いにくいと感じていました。

下記画像のように、Google Chromeだと「▼」部分を選択しないとカレンダーが表示されません。
これは残念ですよね。

日付入力フォームのUIを調べるとDatepickerはよく出てきますが、
デフォルトのデザインがあまり好みではありませんでした。
CSSをコネコネするのもめんどくさい。

フロントにVue.jsを使っていたこともあり、
Vueのコンポーネントで好みのデザインがあればいいなと思ってたどり着いたのが👇

www.npmjs.com

前提

• Ruby 2.7.1
• Rails 6.0.2.2
• UIkit 3.2.4
• yarn 1.21.1

UIkitはご存じない方もたぶん多いと思いますがフロントエンド・フレームワークです。

getuikit.com

インストール

yarnでインストールしました。

% yarn add vuejs-datepicker
yarn add v1.21.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.21.1".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 1 new dependency.
info Direct dependencies
└─ vuejs-datepicker@1.6.2
info All dependencies
└─ vuejs-datepicker@1.6.2
✨  Done in 3.99s.

日付入力フォームの作成

投稿フォームのコンポーネント PostForm.vue に作成していくことにします。

▼JavaScript部分

<script>
import Datepicker from 'vuejs-datepicker'

export default {
  components: {
    Datepicker
  }
}
</script>

▼HTML部分

<template>
<div>
  <datepicker
    name="post[bought_at]"
    id="post_bought_at"
    input-class="uk-input uk-form-width-medium" />
</div>
</template>
<!-- uk- はUIkitで指定されている名前です  -->

<datepicker> という要素を使います。
name属性やclass属性を追加できます。
こちらに追加できるリストが掲載されています。

すると...

これだけで日付入力フォームができました！

カスタマイズ

入力フォームの右端にカレンダーのアイコンなんかあったらステキだなと思ったので、
カスタマイズしてみました。

公式サイトを見てみると、
slot 属性に afterDateInput を指定することで実現できそうだったので挑戦！

<datepicker
  name="sake_post[bought_at]"
  id="sake_post_bought_at"
  input-class="uk-input uk-form-width-medium"
  wrapper-class="uk-inline">
  <span
    slot="afterDateInput"
    class="uk-form-icon uk-form-icon-flip"
    uk-icon="icon: calendar">
  </span>
</datepicker>

おおーーーテンション上がるぅぅ⤴⤴⤴

公式サイトの説明が大変分かりやすく書かれているので、スムーズに導入・カスタマイズできました。
他にもカスタマイズできそうなのでいろいろ試してみたいと思います(^^)