vue Vueで DatePickerを実装

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
自前で用意するのが面倒だったのでこれを使う

$ npm install vue-ctk-date-time-picker --save

cssもインポートしないいけないのが少しダサい
import Datetime from "vue-ctk-date-time-picker";
import "../../node_modules/vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";

<Datetime
    v-model="start_at"
    :minute-interval="5"
    :format="'YYYY-MM-DD HH:mm’”
    :label="dateTimeLabel"
    :overlay="true"
    :min-date="start"
    :max-date="end"
></Datetime>

min-dateなどのデータは “computed” や “watch” などを利用して設定する

  computed: {
    start() {
      const start = moment();
      return start.format("YYYY-MM-DDTHH:mm:ss");
    },
    end() {
      const start = moment(this.start);
      const end = start.add(3, "months").endOf("day");
      return end.format("YYYY-MM-DDTHH:mm:ss");
    },
    dateTimeLabel() {
      return "予定日"
    }
}

Back