3,312 total views, 3 views today
原本想使用jquery UI的Datepicker,但是大大說既然都include vue了,就盡量用vue就好,官網寫安裝很簡單,因為是在純html環境下,如果再laravel要使用,還真碰了些釘子,因此趁還有記憶趕快筆記一下。
先看一下官網範例圖
安裝方法
1. 在laravel根目錄,會自動產生一個 node_modules 目錄
npm install vue-datepicker-local
2.修改 laravel/webpack.mix.js
let mix = require('laravel-mix'); mix.setPublicPath('public/'); mix.js('resources/js/app.js', 'public/js') .js('node_modules/vue-datepicker-local/dist/vue-datepicker-local.js','public/js') .copy('node_modules/vue-datepicker-local/dist/vue-datepicker-local.css','public/css')
3.接著跑一下
npm run watch-poll
4.建立一個 blade 模板,範例如下
<!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div class="form-group"> <label for="SDATE">請選擇搭車日</label> <vue-datepicker-local v-model="time" :disabled-date="disabledDate"></vue-datepicker-local> </div> </div> <script src="{{ mix('/js/vue-datepicker-local.js') }}"></script> <link rel="stylesheet" href="{{ mix('/css/vue-datepicker-local.css') }}"> <script type="text/javascript"> new Vue({ el: '#app', data: { time: new Date(), }, methods: { disabledDate:function (time) { // 這個methods 是在控制停用那些日期不能選擇的。 let maxday = new Date(2018,10,30); // maxday.setDate(maxday.getDate() + 15); return time.getTime() < new Date().getTime() || time.getTime() >= maxday ; }, } }); </script> </body> </html>
這樣就產生結果了美化日曆了
更多官方範例
https://weifeiyue.github.io/vue-datepicker-local/