vue で datepicker を使ってみた

2021年8月16日

参考

Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ！
Vue Componentのstyleを上書きするには

インストール

下記のコマンドで datepicker を新ストールします。

npm install vuejs-datepicker --save

コード

インストールした datepicker と 日本語 を読み込みます。

<script>
    import Datepicker from 'vuejs-datepicker';
    import {ja} from 'vuejs-datepicker/dist/locale';
    export default {
        name: 'hogehoge',
        components: {
            Datepicker,
        },
        data() {
            return {
                ja:ja,
            }
        }
    }
</script>

コンポーネントを設置します。
オプションは参考のリンクから。

<template>
    <Datepicker
        ref="datepicker"
        :monday-first="true"
        :language="ja"
        wrapper-class="calender-text-box-wrapper"
        input-class="calender-text-box"
        placeholder="チェックイン"
        format="yyyy-MM-dd"
    />    
</template>

Datepicker コンポーネントに wrapper-class や input-class でクラス名を指定しても「scopedスタイル」では書かれていないのでグローバルなスタイルとして CSS を書かないとデザインを上書きできないようです。

<style>
    .calender-text-box-wrapper{
        text-align: center;
    }
    .calender-text-box {
        text-align: center;
        border: none;
        outline: none;
        width: 200px;
    }
    .vdp-datepicker__calendar {
        width: 100% !important;
    }
</style>

scoped に収めたい場合は「vue-loaderのディープセレクタ」という機能を使うと解決できるようです。
公式はこちら「スコープ付き CSS」から。

2021年8月16日