忘れないように記録しとこ

カバの樹

Vue3で簡単にDate Time Pickerを実装!「Vue Datepicker」の使い方

2023年3月13日

Vue Datepickerとは

Vue 3 に対応した日付選択コンポーネントです。
カレンダー形式で日付を選択でき、日本語を含む多言語に対応しています。
また、日付フォーマットや外観など多数のオプションがあり、キーボードナビゲーションや日付範囲指定などの機能もサポートしています。
簡単な実装方法と豊富な機能がある高品質な日付選択コンポーネントです。

 

【動画サイズ:342KB】

 

 

環境

この記事は、以下の管理人の検証環境にて記事にしています。

 

Vue2におすすめ!

Vue2の場合は下記のライブラリがおすすめ!
https://www.kabanoki.net/2560/

 

 

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm

npm install @vuepic/vue-datepicker

yarn

yarn add @vuepic/vue-datepicker

CDN

<script src="https://unpkg.com/@vuepic/vue-datepicker@3.6.5/dist/vue-datepicker.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@3.6.5/dist/main.css">

 

リポジトリを取得する場合は、以下のURLから取得できます。

 

 

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。

 

step.1 ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。

ES6等で実装する場合

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

UMDで実装する場合

なし

 

step.2 Vueインスタンスを設定

「VueDatePicker 」をVue コンポーネントでインポートします。

フォーマットを設定するために、「format」オプションにフォーマットを設定します。
フォーマットについての詳しい説明はこちらを確認してください。

const App = {
  data() {
    return {
      date: new Date(),
      format: 'yyyy-MM-dd HH:mm', 
    }
  },
  components: { datepicker: VueDatePicker },
}
Vue.createApp(App).mount('#app');

 

step.3 テンプレートを準備

Vue コンポーネントのテンプレート内で、<datepicker> タグを使用してコンポーネントをレンダリングします。
各種オプションについては、この記事の下部をご参照ください。

サンプルはケバブケースで記載しています。

<div id="app">
  <div id="box">
    <datepicker 
      v-model="date" 
      :format="format"
      :enable-time-picker="true"
      week-start="0"
      locale="ja" 
      placeholder="日付を選択"
      select-text="選択"
      cancel-text="キャンセル"
      :show-now-button="true"
      now-button-label="現在を選択"
    ></datepicker>
  </div>
</div>

 

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

 

 

日付のフォーマット

選択された日付を表示する形式を指定するために、formatオプションを使用します。

たとえば、"yyyy/MM/dd"というフォーマットを指定すると、選択された日付は"2023/03/08"のように表示されます。

以下は、フォーマットを"yyyy年MM月dd日 HH時mm分"に設定した場合の例です。

<datepicker :format="'yyyy年MM月dd日 HH時mm分'"></datepicker>

 

formatオプションを使用することで、日付の表示形式を自由にカスタマイズすることができます。

 

サンプル

 

フォーマット形式

以下は、date-fnsのフォーマット文字列とその意味を表にまとめたものです。

文字列 説明
yyyy 年 (4桁) 2023
yy 年 (2桁) 23
MMMM 月 (テキスト) March
MMM 月 (略語) Mar
MM 月 (2桁) 03
M 月 (1桁) 3
dddd 曜日 (テキスト) Tuesday
ddd 曜日 (略語) Tue
DD 日 (2桁) 08
D 日 (1桁) 8
HH 時間 (24時間制、2桁) 14
H 時間 (24時間制、1桁) 14
hh 時間 (12時間制、2桁) 02
h 時間 (12時間制、1桁) 2
mm 分 (2桁) 30
m 分 (1桁) 30
ss 秒 (2桁) 45
s 秒 (1桁) 45
SSS ミリ秒 (3桁) 123
A 午前/午後 AM

 

 

言語翻訳(日本語等)

カレンダーの言語や書式を変更するために「locale」オプションを使います。
locale には、date-fns の locale オブジェクトを渡す必要があります。
例えば、日本語にする場合は以下のようにします。

 

<datepicker locale="ja"></datepicker>

 

 

サンプル

 

サポート言語一覧

以下がdate-fnsのサポート言語一覧です。

言語 コード
アラビア語 ar
アゼルバイジャン語 az
ベンガル語 bn
ブルガリア語 bg
カタロニア語 ca
チェコ語 cs
デンマーク語 da
ドイツ語 de
ギリシャ語 el
英語 en
スペイン語 es
エストニア語 et
フィンランド語 fi
フランス語 fr
グジャラト語 gu
ヒンディー語 hi
クロアチア語 hr
ハンガリー語 hu
インドネシア語 id
アイルランド語 ga
イスラエルのヘブライ語 he
イタリア語 it
日本語 ja
カンナダ語 kn
韓国語 ko
リトアニア語 lt
ラトビア語 lv
マラヤーラム語 ml
モンゴル語 mn
マラーティー語 mr
ノルウェー語 nb
オランダ語 nl
ポーランド語 pl
ポルトガル語 pt
ローマ字 ro
ロシア語 ru
シンハラ語 si
スロバキア語 sk
スロベニア語 sl
スウェーデン語 sv
タイ語 th
タミル語 ta
テルグ語 te
タガログ語 tl
トルコ語 tr
ウクライナ語 uk
ベトナム語 vi
中国語 zh

このリストは、date-fns v2.0.0のものです。最新のリストは、date-fnsの公式ドキュメントを確認してください。

 

 

ハイライト表示

「highlight」 オプションは、特定の日付を強調表示するために使用されます。
例えば、特別な日付や休日を目立たせたい場合に使用できます。
また「highlight-week-days」オプションを使用すると、特定の曜日を強調表示することができます。

 

個別指定

<datepicker :highlight="[new Date('2023-03-04'), new Date('2023-03-10')]"></datepicker> 

曜日指定

<datepicker :highlight-week-days="[0, 6]"></datepicker> 

 

 

 

選択可能日を設定する

「allowed-dates」オプションは、有効な日付を制限するために使用されます。

 

 
<datepicker :allowed-dates="[new Date('2023-03-04'), new Date('2023-03-22')]"></datepicker>

 

 

 

選択不可日を設定する

「disabled-dates」オプションは、選択不可能な日付を指定するために使用されます。
また「disabled-week-days」オプションを使用すると、無効にする曜日を指定することができます。

 

個別指定

<datepicker :disabled-dates="[new Date('2023-03-09'), new Date('2023-03-10')]"></datepicker>

曜日指定

<datepicker :disabled-week-days="[6, 0]"></datepicker>

 

 

 

マーカーの表示

「markers 」オプションは、カレンダーにマーカーを表示するために使用されます。
マーカーは、特定の日付に関する情報を示すために使用されます。例えば、予定がある日にマーカーを表示する場合に使用できます。

マーカーはTooltipも使用することができます。
予定ある日の詳細な内容をTooltipで表示します。

 

<datepicker :markers="markers" v-model="date" ></datepicker>

 

const App = {
  data() {
    return {
      date: new Date(),
      markers: [
        {
          date: new Date('2023-03-10'),
          type: 'dot',
          tooltip: [{ text: 'ドットのTooltip', color: 'green' }], 
        },
        {
          date: new Date('2023-03-09'),
          type: 'line',
          tooltip: [
            { text: '最初のTooltip', color: 'blue' },
            { text: '最後のtooltip', color: 'yellow' },
          ],
        }, 
        {
          date: new Date('2023-03-11'),  
          type: 'dot',
          color: 'blue',
          tooltip: [{ text: '青色のドットのTooltip', color: 'green' }],
         },
      ]
    }
  },
  components: { Datepicker: VueDatePicker },
}
Vue.createApp(App).mount('#app');

 

 

 

インライン表示

カレンダーをインラインで表示するには、「inline」オプションを設定します。

 

<datepicker inline></datepicker>

 

 

 

範囲指定で選択

範囲を指定して日付を選択するには、「range」オプションを設定します。
選択可能な範囲を指定するには「auto-range」オプションを使います。

 

<datepicker range auto-range="6"></datepicker>

 

 

 

複数日付を選択

一度に複数の日付を選択するには、「multi-dates」オプションを設定します。

 

<datepicker multi-dates></datepicker>

 

 

 

日付のみ使用

日付のみを使用するには、「enable-time-picker」オプションを false にする必要があります。

 

<datepicker :enable-time-picker="false"></datepicker>

 

 

 

時間のみ使用

時間のみ使用するには、「time-picker」オプションを設定します。

 

<datepicker time-picker></datepicker>

 

 

 

年のみ使用

年のみ使用するには、「year-picker」オプションを設定します。

 

<datepicker year-picker></datepicker>

 

 

 

月のみ使用

月のみ使用するには、「month-picker」オプションを設定します。

 

<datepicker month-picker></datepicker>

 

 

 

週のみ使用

週のみ使用するには、「week-picker」オプションを設定します。

 

<datepicker week-picker></datepicker>

 

 

 

曜日を日曜日始まりにする

カレンダーの曜日を日曜日始まりにするには、「week-start」オプションに「0」を設定します。

 

<datepicker week-start="0"></datepicker>

 

 

Methods

イベントと組み合わせて使用します。
例えば日付を選択してすぐにピッカーメニュー閉じて欲しい時などに使用します。

メソッド名 内容
selectDate アクティブな選択がある場合、その日付が選択されます。
closeMenu 日付ピッカー メニューを閉じます。
openMenu 日付ピッカー メニューを開きます。
clearValue 選択した値をクリアします。
updateInternalModelValue model-valueピッカーが開いた状態で内部を変更します。
setMonthYear プログラムでカレンダーの月と年を設定する。
onScroll ウィンドウのスクロール時に呼び出されるメソッドを手動でトリガーする。

 

 

イベント

ユーザーの操作によって発生するイベントの一覧です。

イベント名 説明
@update:model-value 値が選択されたときに発生するイベントです。これはv-model バインディングイベントです。
@text-submit text-input プロパティが true に設定され、text-input-optionsenterSubmit が true に設定されている場合、enter ボタンが押されたときにこのイベントが発生します。
@open 日付ピッカー メニューが開かれたときに発生するイベントです。
@closed 日付ピッカー メニューが閉じられたときに発生するイベントです。
@cleared clear ボタンで値がクリアされたときに発生するイベントです。
@focus 入力がフォーカスされたときに発生するイベントです。
@blur 入力がフォーカスを失ったときに発生するイベントです。
@internal-model-change 選択する前に内部の model-value が変更されたときに発生するイベントです。この日付が v-model に設定されます。
@recalculate-position メニューの位置が再計算されたときに発生するイベントです。
@flow-step フローのステップがトリガーされたときに発生するイベントです。
@update-month-year 月または年が変更されたときに発生するイベントです。
@invalid-select 選択された値が無効な場合に発生するイベントです。
@invalid-fixed-range 固定開始または固定終了で範囲モードでクリックされた日が選択のために無効な日付である場合に発生するイベントです。
@tooltip-open マーカーのツールチップが開かれたときに発生するイベントです。
@tooltip-close マーカーのツールチップが閉じられたときに発生するイベントです。
@time-picker-open time-picker オーバーレイが開かれたときに発生するイベントです。

 

 

まとめ

Vue 3系のDateTimePickerでした。

ある程度やりたいことは全て網羅されている感じなので、管理人は今後はこのライブラリを主軸に使っていくと思います。
あとはUIをちょっと調整しないなあ。

 

今日はこの辺で-

 

  • B!