[分享]laravel安裝vue-datepicker-local日曆美化套件
2,162 total views, 6 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/