Memo
vue Vueで DatePickerを実装
Home
›
Memo
›
Vueで DatePickerを実装
本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
自前で用意するのが面倒だったのでこれを使う
https://github.com/chronotruck/vue-ctk-date-time-picker
$ 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 "予定日"
}
}
関連ページ
Nuxtにスワイプ/スライドのアクションを導入する
#vue
2020-10-29 20:19:48
Nuxtでmomentを使う
#vue
2021-03-10 21:53:23
動的にassetsの画像をセッティングする
#vue
2020-08-25 20:27:17
Nuxt 環境毎に環境変数の設定
#vue
2021-01-28 17:58:30
コンポーネントの削除
#vue
2020-06-14 18:25:52
Back